So CSS makes layouts easier than they were with tables – there’s not really much debate about that. One of the reasons many people stuck with tables for so long (and, in fact, still stick with tables to this day) is that it can be difficult to create column-based designs using CSS. Since there are so many websites that essentially consist of a middle column of content surrounded by left and right columns containing navigation and ads, this was considered to be unacceptable.

The Power of Float.

Really, though, CSS columns aren’t that difficult to produce once you understand how CSS float rules work. Float allows you to say that some parts of your content should ‘float’ next to other parts, instead of being displayed one after the next (that is, underneath each other).

Despite all the fear of column layouts in CSS, it’s quite simple. Basically, the first thing to do is to divide your content from your navigation using the div tag, like this:

< div id="left-nav">
< div id="right-nav">
< div id="main-content">

Note that the divs must be in this order – left, right, centre – because otherwise one column might end up underneath another in a way you don’t expect. Ordering things logically as left, centre, then right, for example, will cause your right column to end up under the centre one.

Anyway, the next step is to write the CSS for those IDs you just set up. Are you ready for the CSS that’s made old-style HTML developers run in fear for about five years now? It looks like this:

# left-nav { float: left; width: 20%; }
# right-nav { float: right; width: 20%; }

Obviously you can adjust the widths depending on how wide you want your left and right columns to be (you can choose whether to set the widths as percentages or in pixels). And that’s it! You’ve set up a successful three-column layout.

Then, though, the problems come – they might seem small, but they’re big enough to drive anyone who works on CSS column layouts nuts. Luckily, however, they can be solved with a little lateral thinking.

The Background Problem.