In this example, I've created two columns. As they are identical, I can declare them as a 'class' like this:-
and then, inside the 'content' box I insert two boxes like this:-
To make the boxes sit side by side, they are given a 'float: left' attribute.
The 'float' needs to be cleared for the footer underneath by adding 'clear: left' to the footer declaration otherwise it will try to sit beside the columns instead of under them.
Ideally, there should be some space betweeen the columns - a 'gutter'.
If all browsers behaved the same way, we could use some left and right padding to do this but padding is handled differently by MS Explorer and we want to avoid those problems, don't we?
A simple solution is to create a 'gutter' class, another narrow column of 9 pixels width, and put it between the two main ones.
We then subtract 5 pixels from the 'col' class width to get a total of 220+9+220=449 pixels so that it just fits inside the 450 pixel 'content' box.
Of course, it is difficult to get column heights to match exactly on a
Web page!