4 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="left3">
	            left3
	        </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 parellel layout

Compared with the nested design, the parelle design removes 3 pair of extra wrapper divs in 4 columns layout, including the relevant CSS codes.

What's the difference

This design uses left rather than margin to seperate the columns, that's why the position is relative. It works well for both fixed and liquid layouts

liquid or fixed?

To use liquid layout, just set the unit to % . For fixed column, set it to px or em. Be careful to use em coz em layout is relevant to the font-size defined in body tag.

Browser Compatibility

IE 7.0, 6.0
Firefox 1.5

Social Bookmark / donate

Dynamic 4 Column Layout Generator - Parellel Design