Logo

CSS Column Generator


This page allows you to create fixed CSS columns for site layouts. Simply enter the information in the fields below and press enter, or click outside the field you make changes in, to see your changes reflected. Use the "Add Column" button to add an additional column. The CSS and HTML will appear at the end of the page. This method works cross-browser, including IE7. (as long as you have a "DOCTYPE" tag to start) While this generator creates cross-browser layouts, the generator itself does not work cross-browser. If you are using IE you will need version 9. (which requres Windows Vista or 7) Or, just use another browser. This generator is based on the "Equal Height Columns with Cross-Browser CSS" article by Matthew James Taylor.

You do not need to enter column heights using this layout method.

Background color and border color can both be transparent by leaving the colors blank. However, leaving background colors blank so that a they appear transparent does not work using this method if you want to try to make the page's background color be visible. You will need to enter the page's background color in the columns you want it to be visible in.

The widths and paddings on this page are in pixels. All column widths are required. Using percents in a generator like this would be more complex and that is why it doesn't handle those. For examples on using percents, see the articles "Perfect multi-column CSS liquid layouts" (using percents only) and "Ultimate multi-column liquid layouts" (using a mixture of percents and fixed widths) also by Matthew James Taylor.

This column generator allows you to choose between the default CSS box-sizing behavior (box-sizing: content-box), in which the padding and border are not included in the width, and "box-sizing: border-box", in which the padding and border are included. The default CSS box-sizing behavior is how browsers act by default. This column generator doesn't add anything if you choose that option. About "box-sizing".
Generated Columns:
Once you start filling in data below this text will be replaced with your generated columns.



For each of the following properties, select whether you would you like to enter the property of each column individually or have all the columns share the same value for the particular property. If you want all the columns to share the same value, enter the value you want in the box that appears below the drop down field.

Column Width:
Column Padding:
Column Background Color:
Right Border of Each Column:

Below you can choose the properties of the main border around the entire outer div.

Main Border Width: Color: Style:
Click here to choose border options for each individual side.

In addition to having the option to set one padding for each column or setting the same padding for every column, you can also choose to set the padding for each side of each individual column.

Additional Padding Option:

CSS Box Sizing


Would you like the outer div you create to be centered horizontally on the page?


Would you like the CSS to be separate from the HTML using classes or in the HTML using styles?

Complete CSS:

The complete CSS will appear here when you start entering data above.
Complete HTML:

The complete HTML will appear here when you start entering data above.
Valid XHTML 1.0 Transitional