Home > CSSColumns

CSSColumns

CSSColumns is a project mainly written in ..., it's free.

Stylesheet that lets you easily create column structures within HTML markup

Have you ever wanted to quickly create columns with your html layouts without using tables? Well the "cols.css" stylesheet included in this package is an attempt to do just that.

Installation


  1. Copy "cols.css" to the folder where your html document is located. In this case, we're adding it within a "stylesheets" folder.

  2. link "cols.css" to the html document where you want to have columns.

Example:

...

How to use


To begin use the

element with a "row" class to create a row.

Let's start with a 2 column layout. To make the columns, insert 2 more divs within the row div.

Now add another class to the row div to tell it how many columns to expect. In this case, "cols2" for a 2 column layout. We will also add some content to our columns so we can see the results.

Column 1 content

Column 2 content

That's all there is to it. So if we want to do 3-column layout, we'll use the "cols3" class and so on...

Column 1 content

Column 2 content

Column 3 content