Dynamic 1 Column Layout Generator


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

Editor Panel

Layout unit
px em %
Body font-size
Body font unit
main body

This is header of your 1 columns page

Why need the tool

1 columns layout design is also popular in web page design,especially useful in the layout of blog. 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.


  • 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


  • Save the time of design the layout
  • Easy to change the exsisting page
  • Easy to develop muti-view pages like msn or yahoo with the aid of some scripts

How to use

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

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