4 Column CSS Layout Generator - Parellel design

Dynamic 4 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

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

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.