2 Column CSS Layout Generator - using Margin

2 Column Layout Creator - Parallel Design

Output

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

Editor Panel

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

Why the Parallel layout?

We have proved that the nested layout could build liquid layouts up to 5 columns. The more columns, the more wrapper div tags. Sometimes we may not like many extra div tags. The parallel layout is the solution.

The same as the nested design, we use left instead of margin to seperate columns.

The tool

Just drag the sliders to adjust the width of the left and right columns. This tool is keeping upgrading until it becomes a real WYSISWG HTML editor.

Features