Dynamic 5 Column Layout Generator

1 Column Layout Generator 2 Column Layout Generator 3 Column Layout Generator 4 Column Layout Generator

CSS code of 5 column layout

Social Bookmark / Donate
You also need the HTML code here. If the layout is embeded in another muticolumn page, a different className should be used.

Tune the sliders. What You See Is What You Get.

0
25%
50%

0
25%
50%

0
25%
50%

0
25%
50%

0
25%
50%


Why need the tool

5 column css layout is a challenge for many of web designers. It's a time-consuming job without a tool. In fact, you can realize it with 3 column layout + nested 3 column layout or 4 column layout + nested 2 column by using our layout generators. But this will increase the number of HTML tags and length of css code.

This tool will help you to generator your optimized 5 layout code in one generator and achieve WYSIWYG.

How to use

Just drag 4 sliders to adjust the widths of the column. Select widths of the gaps.

  • Slider1 - adjust the left and right margin of the page
  • Slider2 - adjust the width of column 2 and column 5.
  • Slider3 - adjust the width of column 2 and column 4
  • Slider4 - adjust the width of column 2 and column 3
  • Slider5 - adjust the width of column 2 and column 1

Features

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

Advantages

  • Save the time of design the layout
  • Easy to change the exsisting page
  • Easy to develop multi-style pages like msn or yahoo with page option buttun

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