5 Column DIV Layout Creator - margin style

Nested 5 Column Layout | Parallel 5 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.

Where the layout be used?

This layout is preferred being used to design in-page 5 column tables. It can be used as a creator for 5 columns tableless table.

liquid or fixed?

Both fixed width column and liquid column work well by this design. Be careful of using em because em layout is relevant to the font-size defined in body tag.

the Height

Normally, you don't have to set height values. The height of the columns will extend with the content. Of course, it's an easy thing to set height values.