Dynamic 4 Column Layout Generator - Parellel Design


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
main body

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.