2 Column CSS Layout Generator

Output

	    <div class="header">
	         header
	    </div> 
	    <div class="wrapper">
	        <div class="left">
	            left
	        </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

Layout unit

px em %

Body font-size

Body font unit

Height

header

main body

footer

Column
Gutter
Color
Option

Why the Parallel layout?

We have proved that the nested layout could build liquid layouts up to 5 columns. The more columns, the more wrapper div tags. Sometimes we may not like many extra div tags. The parallel layout is the solution.

The same as the nested design, we use left instead of margin to seperate columns.

The tool

Just drag the sliders to adjust the width of the left and right columns. This tool is keeping upgrading until it becomes a real WYSISWG HTML editor.

Features

Tableless design, no javascript, pure div layers and css.
Allow using 3 different units - %, px or em.
Visual change the width and colors, WYSIWYG layout creator

Browser Compatibility

The layout generated by this tool has been tested in the following browers.

IE 7.0, 6.0
Firefox 1.5

Social Bookmark / donate

2 Column Layout Creator - Parallel Design