Using the DIV tag to display columns rather than tables
From my archive - originally published on 12 February 2008
2019 Update: I keep this post in place because for some unknown reason it has always done extremely well on Google searches, generating a gratifyingly large number of visits. I guess it explains the subject well and formatting HTML-based columns using DIV tags was an entry-level skill back in the day.
However, things have moved on a bit in the last eleven years. I’m a big, bad architect now, but even I know that if you’re trying to manually craft HTML pages in this day and age then you’re probably doing it wrong. Sure, it can help to understand how mark-up and styles interact on a basic level, but if you’re serious about building web pages then use a framework such as Bootstrap, Semantic UI or Pure. It’ll make your life so much easier.
If you’re here because you’re struggling to understand a big wedge of legacy mark-up then you have my sympathy…
The TABLE element may be a convenient way of producing stable layouts, but the W3C WAI guidelines are pretty clear that tables are for displaying tabular information, not for arranging page content.
The DIV element is used as the basic layout element as it does not add any extra meaning to semantic mark-up. With a bit of CSS you can position it and size it pretty much anyway you want.
A basic set of DIV columns to replace a table
The basic technique is shown by the columns below:
These columns have been created by wrapping three DIV elements into one container DIV. The container has its width set to 900 pixels and each column is set to 300 pixels wide. In order to make the columns line up you need to set the float style of each column DIV to left.
The HTML below shows how this is arranged in simple mark-up.
<div class="columns"> <div class="red" >Column 1</div> <div class="grey">Column 2</div> <div class="red" >Column 3</div> </div> <div class="clear"></div>
When calculating the columns size, take into account any padding and borders as they are included in the width of the column. For example, a column that is 150px wide with padding of 5px and a border of 1px should be set to 144px wide. Margins are added to the outside, so a 10px margin will make the same column run to 160px.
Here are the styles:
div.columns { width: 900px; } div.columns div { width: 300px; height: 100px; float: left; } div.grey { background-color: #cccccc; } div.red { background-color: #e14e32; } div.clear { clear: both; }
Note that there is a final DIV element where the clear style has been set to both. This effectively “re-sets” the layout after the floating columns so any further elements won’t try and line up with your last column.
Using a DIV-based grid
Most layouts require more flexibility than a fixed set of columns, so a grid system is often adopted. This allows a page to be based on a more flexible set of styles. The example below shows a grid composed of three different types of column.
The HTML is pretty straightforward:
<div class="grid"> <div class="col100 red">100 pixels</div> <div class="col200 grey">200 pixels</div> <div class="col300 red">300 pixels</div> <div class="col100 grey">100 pixels</div> <div class="col200 red">200 pixels</div> </div> <div class="clear"></div>
As are the styles:
div.grid { width: 900px; } div.grid div { float: left; height: 100px; } div.col100 { width: 100px; } div.col200 { width: 200px; } div.col300 { width: 300px; } div.grey { background-color: #cccccc; } div.red { background-color: #e14e32; } div.clear { clear: both; }
Aligning DIV columns to the centre of the page
Most column-based layouts use a fixed width that is centred on the page. This can be done by manipulating the text alignment of a containing DIV element but is more commonly achieved through the margin style of the content DIV. If you set this to auto then browsers will automatically line up the content in the middle.
The example below shows a simple two-column DIV element that is centred in a container:
The HTML shows how the DIV elements are arranged:
<div class="centered"> <div class="columns"> <div class="red" >Column 1</div> <div class="grey">Column 2</div> </div> <div class="clear"></div> </div>
The styles will be pretty familiar, save for the extra margin attribute.
div.centered { width: 900px; } div.columns { width: 600px; margin: 0 auto;} div.columns div { width: 300px; height: 100px; float: left; } div.grey { background-color: #cccccc; } div.red { background-color: #e14e32; } div.clear { clear: both; }