Dynamic 2 Column Layout Generator

1 Column Layout Generator 3 Column Layout Generator 4 Column Layout Generator 5 Column Layout Generator new

CSS code of 2 column layout

Social Bookmark if the page is useful or

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%




This is header of your 2 columns page

Why need the tool

2 columns layout design is also popular in web page design.The same as the 3 columns layout, we use only layers and CSS codes.

This tool helps you to achieve WYSIWYG and get your css code in the real time.

Features

  • Liquid design, no tables, no javascript, pure layers and css.
  • Visual layout and backgroud color design, WYSIWYG
  • Cross browser compatibility
  • Compact CSS code, reduce 25% of length

Advantages

How to use

Just drag 2 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 left and right columns.
  • Gap - the width of gaps can be changed by clicking the gap button

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