Dynamic 4 Column Layout Generator

1 Column Layout Generator 2 Column Layout Generator 3 Column Layout Generator 5 Column Layout Generator

CSS code of 4 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%




Why need the tool

4 column layout is used in the home page of some news websites or a webpage with a lot of lists of information. It seems a reasonable choice to use tables to design a page with 4 column layout. Here we extend our nested layer design to 4 column layout.

You get your css code in the real time and achieve WYSIWYG.

How to use

Just drag 4 sliders above to adjust the widths of the columns. Select the width of gap and background colors.

  • Slider1 - adjust the left and right margin of the page
  • Slider2 - adjust the width of column 2 and column 4.
  • Slider3 - adjust the width of column 2 and column 3
  • Slider4 - adjust the widths 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