3 Column CSS Layout Creator

Output

    <div class="wrapper">
        <div class="header">
            header
        </div>	    
        <div class="left1">
            left1
        </div>
        <div class="left2">
            left2
        </div>	        
        <div class="right">
            right
        </div>  	       
        <div class="footer">
            footer
        </div>
    </div>

Change class names in HTML code or auto change. Back to default

Include <style> tags Full HTML code

className
codes

Editor Panel

Layout unit

px em %

Body font-size

Body font unit

Height

header

main body

footer

Column
Gutter
Color
Option

What's the difference?

This design has one container div and the columns are seperated by margins between the columns . It may be the most popular design of 3 column layout.

Here we skipped the double margin bug of IE6 by avoiding float and margin in the same direction.

Features

Just drag the sliders, WYSIWYG.
Tableless design, no javascript, pure div layers and css.
Design fixed and liquid layout by setting unit to px, em or %.
Change the color in the palette
Easy to change the class name what you want.

Browser Compatibility

We considered rounding issues using em and % units. Both Fixed column layout using px, or em and liquid layout using % work well in IE and Firefox.

Social Bookmark.

3 Column DIV Layout Creator - margin style