As much as I adore CSS, it seemed to me that it had one main limitation – it’s impossible to make it behave like tables. For example, it you have three columns of data beside each other, if one pushes down further than the others, the adjacent two won’t push down to match. Something like this happens instead:
The temptation is of course, to just use a sneaky table. But after some research I found this elegant solution by Pixy. The main beauty of this technique is that it works even in IE6, and doesn’t require any hacks. However, it is a little hard to get your head around if you’re new to CSS, so here’s my simplified breakdown of Pixy’s technique.
As you might expect, you begin by creating three columns – the left one floating left, the right one floating right, and the middle one unpositioned. I have given a width of 150px to the two side columns, and created another div underneath with the ID ‘clear’. This div ensures the floats above are properly closed, so you could put another div below these columns without it scrunching up unexpectedly.
So here’s what we’ve got so far:
#left { float:left; width:150px; }
#right { float:right; width:150px; }
#clear { clear:both; }
<div id=”left”>This is the text for the left hand side.</div>
<div id=”right”>This is the text for the right hand side.</div>
<div id=”middle”>This is the text for the left middle section.</div>
<div id=”clear”></div>
This will produce a page which looks very much like the image above. So to make it push down evenly like a table, we can use Pixy’s technique. This involves creating two more divs around the 4 we already have. These divs are to hold the background images – one for the left, and one for the right:
#main1 { background:url(purple.gif) top left repeat-y #fefcb9; }
#main2 { background:url(blue.gif) top right repeat-y; }
<div id=”main1″>
<div id=”main2″>
<div id=”left”>This is the text for the left hand side.</div>
<div id=”right”>This is the text for the right hand side.</div>
<div id=”middle”>This is the text for the left middle section.</div>
<div id=”clear”></div>
</div>
</div>
The main1 div gives the background colour for the middle column, and the background image for the left column. By mixing an image and a colour into one background tag, we only need one div to set the colour on two columns (left and middle). The main2 div sets the background image for the right column.
By doing this, we now have something that looks like this:
Of course, there are some limitations. If you wanted to put borders around each column, it might be a little tricky. This is because it’s only the background rather than the div itself which pushes down to the bottom. So you might be able to create the effect by creating background images with borders on them, but CSS borders may cause some problems.