3 Column CSS Layout Generator - Parallel design

Dynamic 3 Column Layout Generator - Parallel 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
side gutters Yes No
0
25%
Layout unit
px em %
Body font-size
0
25%
Body font unit
Height
header
px
main body
px
footer
px

Why the Parallel layout?

3 column layout can be achieved with nested design. But sometines you may not like the extra wrapper div tags, e.g. the layout for tableless table. The Parallel layout is the solution.

Here we use left to seperate columns, that's why the position is relative.

The tool

Just drag the sliders to adjust the width of the columns. You can design liquid or fixed 3 column layout in minutes.

  • Tableless design, no javascript, pure div layers and css.
  • Design liquid or fixed layout by setting unit to %, px or em.
  • Visual change the width and colors, WYSIWYG layout creator