2 Column CSS Layout Creator

Output

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

Why is this design?

This design uses the least coding. It uses margin to seperate columns. So there's no need to set the position to relative. It works for both fixed and liquid layouts.

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.

Social Bookmark.

Features

Tableless design, allow using 3 different units - %, px or em.
Easy to change the class name what you want.
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