3 Column DIV Layout Creator - margin style

Output

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

Editor Panel

Layout unit
px em %
Body font-size
Body font unit
Height
header
px
main body
px
footer
px

What's the difference?

This design has one container div and the columns are seperated by margins between the columns . It may be the most popular design of 3 column layout.

Here we skipped the double margin bug of IE6 by avoiding float and margin in the same direction.

Features

  • Just drag the sliders, WYSIWYG.
  • Tableless design, no javascript, pure div layers and css.
  • Design fixed and liquid layout by setting unit to px, em or %.
  • Change the color in the palette
  • Easy to change the class name what you want.