2 Column Layout Generator

Output

    <div class="mask">
    <div class="header">
	         header
	</div> 
    <div class="colleft">
	    	  
	    <div class="col1">
	        right
	    </div>
	    <div class="col2">
	        left
	    </div> 
	</div>
	    <div class="footer">
	        footer
	    </div>
    
    </div>

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

Include <style> 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 need the tool

2 columns layout design is also popular in web page design.The same as the 3 columns layout, we use only layers and CSS codes.

This tool helps you to achieve WYSIWYG and get your css code in the real time.

Features

Liquid design, no tables, no javascript, pure layers and css.
Visual layout and backgroud color design, WYSIWYG
Cross browser compatibility
Compact CSS code, reduce 25% of length

Advantages

Save the time of design the layout
Easy to change the exsisting page
Easy to develop muti-view pages like msn or yahoo with page option buttun
The similar tool could be used to design the layout for the blogs in blogger.com

How to use

Just drag 2 sliders above to adjust the layout sizes of the page. The css code is dynamically generated in textarea box.

Slider1 - adjust the left and right margin of the page
Slider2 - adjust the width of left and right columns.
Gap - the width of gaps can be changed by clicking the gap button

Browser Compatibility

The css code generated by this tool is shown to have compatibility with the following browsers. You are welcome to send me the feedback if your browser have passed the test.

IE 8.0 beta, 7.0, 6.0
Firefox 1.5, 3.0

2 Column CSS Layout Generator