5 Column CSS Layout Generator - Parellel design

Dynamic 5 Column Layout Generator - Parellel Design

Output

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

Editor Panel

0
0
0
0
0
side gutters Yes No
0
Layout unit
px em %
Body font-size
0
Body font unit
Height
header
px
main body
px
footer
px

Why the parellel layout

The benefit of parelle layout is more obvious for 5 columns layout. 4 pair of extra wrapper divs are removed in the nested design. So are the relevant CSS codes.

Where the layout be used?

It's indeed rare to use 5 columns as page layout. But this design can be used to design in-page 5 column data instead of tables. It can be used as a creator for tableless table.

liquid or fixed?

If you like liquid layout, set the unit to % . For fixed width 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.

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 the height.