3 Column CSS Layout Generator

Output

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

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

Include <style> tags Full HTML code

className
codes

Editor Panel

side gutters Yes No

25%

Layout unit

px em %

Body font-size

25%

Body font unit

Height

header

main body

footer

Column
Gutter
Color
Option

Why the Parallel layout?

3 column layout can be achieved with nested design. But sometines you may not like the extra wrapper div tags, e.g. the layout for tableless table. The Parallel layout is the solution.

Here we use left to seperate columns, that's why the position is relative.

The tool

Just drag the sliders to adjust the width of the columns. You can design liquid or fixed 3 column layout in minutes.

Tableless design, no javascript, pure div layers and css.
Design liquid or fixed layout by setting unit to %, px or em.
Visual change the width and colors, WYSIWYG layout creator

Browser Compatibility

Liquid and fixed layouts generated by this tool has been tested in the following browers.

IE 7.0, 6.0
Firefox 1.5

Social Bookmark / donate

Dynamic 3 Column Layout Generator - Parallel Design