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

0px
1264px
1264px
.
0px
200px
1264px
.
0px
204px
1264px
.
0px
177px
1264px
.
0px
163px
1264px
.
side gutters Yes No
0px
20px
20px
.
Layout unit
px em %
Body font-size
0.5em
0.9em
1em
.
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.