You will probably find that IE 6 and 7 do not align the top lines of Web Developer left and right columns in the same way as all the other browsers. If your site design happens to be alignment-sensitive, you may want to use the conditional includes described in the article How to Use Different CSS Style Sheets For Different Browsers (and How to Hide CSS Code from Older Browsers) to position your text specifically for those browsers.

It's best to specifically position the code for IE 6 and 7 alone (and not all IE versions), since Microsoft has promised that IE 8 will have improved CSS standards compliance, so if you position it for all IE versions, your site design will break in IE 8 and above.

The code given above merely provides the basic layout. As it stands, your text and graphics will go right to the edge of each column. One way to make some space between the text and the edges is to add the following property to your content, navbar, header and footer DIV selectors.

padding: 4px ;

The exact width of the padding is of course up to you. The 4px given here is just an example.

With the CSS code given above, you're now on your way to creating your 2-column website. You may also wish to check out the CSS navigation menu bar wizard as well, if you wish to add a CSS-driven navigation menu bar to your side panel that has mouse-over hover effects.