4 Column DIV Layout Creator - margin style

Nested 4 Column Layout | Parallel 4 column layout | Home

Output

Change class names in HTML code or auto change. Back to default
Include <style> tags Full HTML code

Editor Panel

Layout unit
px em %
Body font-size
Body font unit
Height
header
px
main body
px
footer
px

What's the difference?

This design has one container div and the columns are seperated by margins between the columns .

Here we avoid the double margin bug of IE6.

the Tool

Just drag the sliders to adjust the width of the columns, change the color in the palette. Then the tool generates clear CSS codes for the layout.

liquid or fixed?

This tool generates perfect fixed layout in px or em unit. For liquid layout using % unit, we take consideration of rounding issues of browers. Still we get perfect liquid 4 column layout in most cases.