Posted on Leave a comment

CSS: Three Column Layout ( with duplicated rows)

Sometimes you’ll need to display data in rows which also align vertically. (See the example).

For this it is best to create a div for your row holder with individual divs to set the column constraints.

[div class=’row’]
[div class=’cell’]Column 1[/div]
[div class=’cell’]Column 2[/div]
[div class=’cell’]Column 3[/div]
[/div]
And within the stylesheet:
.row {
clear:both;
}

.cell {
float:left;
width:100px;
}

Duplicate the row div and you will have equal rows and columns for your data.

Leave a Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.