Div based columns made simple

For a long time me and some co-workers felt the need to use Div element instead of the good-old TABLE elements, since it is so DAMN easy to achieve the desirable results with TABLE elements. On a second note and for a while now we use our own CMS platform thus the need to create layouts and pages quickly is constant. So I have been looking for a nice DIV-based alternative for column-based designs easy to implement.

This solution is simple clear and it can be done by just executing the following:

Add the class name "grid" to the root element of the grid structure.
Add the class name "row" to each row elements within the "grid".
Add the class name "one", "two", "three" etc. (the amount of cells) to each row DIV to specify how many cells it contains.
Add the class name "cell" to each cell DIV within each row.
Add the class name "last" to the last row and the last cell of each row.

CSS

Apply the following stylesheet classes to your page to suport div columns:

.grid {}
.grid .row {}
.grid .row .cell { float:left; _zoom:1; }

.grid .row.one .cell { float:none; }
.grid .row.two .cell { width:50%; }
.grid .row.three .cell { width:33.2%; }
.grid .row.four .cell { width:25%; }
.grid .row.five .cell { width:20%; }
.grid .row.six .cell { width:16.6%; }
.grid .row.seven .cell { width:14.2%; }
.grid .row.eight .cell { width:12.5%; }
.grid .row.nine .cell { width:11.1%; }
.grid .row.ten .cell { width:10%; }

.grid .row, .grid .row .cell.last { overflow: hidden; _overflow:visible; _zoom:1; }
.grid .row .cell.last { float:none; _position:relative; width:auto; }

HTML example

The following HTML blockquote will create a nice grid with ten rows and an increasing cell amount for each row.

<div class="grid">

<div class="row one">
<div class="cell">1</div>
</div>

<div class="row two">
<div class="cell">1</div>
<div class="cell last">2</div>
</div>

<div class="row three">
    <div class="cell">1</div>
    <div class="cell">2</div>
    <div class="cell last">3</div>
</div>

<div class="row four">
    <div class="cell">1</div>
    <div class="cell">2</div>
    <div class="cell">3</div>
    <div class="cell last">4</div>
</div>

<div class="row five">
    <div class="cell">1</div>
    <div class="cell">2</div>
    <div class="cell">3</div>
    <div class="cell">4</div>
    <div class="cell last">5</div>
</div>

<div class="row six">
    <div class="cell">1</div>
    <div class="cell">2</div>
    <div class="cell">3</div>
    <div class="cell">4</div>
    <div class="cell">5</div>
    <div class="cell last">6</div>
</div>

<div class="row seven">
    <div class="cell">1</div>
    <div class="cell">2</div>
    <div class="cell">3</div>
    <div class="cell">4</div>
    <div class="cell">5</div>
    <div class="cell">6</div>
    <div class="cell last">7</div>
</div>

<div class="row eight">
    <div class="cell">1</div>
    <div class="cell">2</div>
    <div class="cell">3</div>
    <div class="cell">4</div>
    <div class="cell">5</div>
    <div class="cell">6</div>
    <div class="cell">7</div>
    <div class="cell last">8</div>
</div>

<div class="row nine">
    <div class="cell">1</div>
    <div class="cell">2</div>
    <div class="cell">3</div>
    <div class="cell">4</div>
    <div class="cell">5</div>
    <div class="cell">6</div>
    <div class="cell">7</div>
    <div class="cell">8</div>
    <div class="cell last">9</div>
</div>

<div class="row ten last">
    <div class="cell">1</div>
    <div class="cell">2</div>
    <div class="cell">3</div>
    <div class="cell">4</div>
    <div class="cell">5</div>
    <div class="cell">6</div>
    <div class="cell">7</div>
    <div class="cell">8</div>
    <div class="cell">9</div>
    <div class="cell last">10</div>
</div>