3 Column CSS Layout Generator

Home 1 Column Layout Generator 2 Column Layout Generator 4 Column Layout Generator 5 Column Layout Generator

Output

Change class names in HTML code or auto change. Back to default
Include <style> 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 need the tool

Many websites adopt 3 columns layout design. There are two technologies to achieve the multicolumn layout design. One is using tables, which could be easily adopted by beginners. But tables are not as easy and flexible when you have more contents to add or animations to develop. What is the most popular way is using layers plus CSS code. You could easily find various templetes on the web. But the template is not easy to use too because when you have to adjust the width of one column, the other columns are messed up.

This online tool helps you to get your css code in the real time and achieve WYSIWYG. After you have tried this tool, you know why the templates are not enough because a usable layout of css code falls into only a limited band. It's just like carefully tuning a short wave radio to find wanted channels.

Features

  • Liquid design, no tables, no javascript, pure layers and css.
  • Visual change the width and safe colors, WYSIWYG layout creator
  • Cross browser compatibility
  • Compact CSS code, reduce 25% of length

Advantages

How to use

Just drag 3 sliders above to adjust the layout sizes of the page. The css code is dynamically generated in textarea box.

  • Slider1 - adjust the left and right margin of the page
  • Slider2 - adjust the width of right column and left column.
  • Slider3 - adjust the width of left and middle columns

Browser Compatibility

The css code generated by this tool is shown to have compatibility with the following browsers. You are welcome to send me the feedback if your browser have passed the test.

  • IE 8.0 beta, 7.0, 6.0
  • Firefox 1.5, 3.0

Layout components