Creating a simple three-column design with CSS and Dreamweaver 8

Adding content to the column

Copy a couple of the smaller paragraphs of Lorem Ipsum filler text out of the middle content area (or your own custom gibberish) and paste it into the #news div. Be sure that the text is placed in P elements. The effect of this part of the exercise is best if you don't copy so much text over that the right column becomes longer than the middle content area. Since the black text is a bit tough to read on the dark background, let's quickly add a descendant selector to the demo.css file that tells all P elements in the #news div to render in white:

#news p {
    color: #FFF;
}

Tip: I find it quickest to develop in Firefox and then, when I've completed most everything, preview in Internet Explorer (IE). It's much simpler to create a couple special rules or declarations to fix any IE problems than it is to try to do the same in a standards-compliant browser.

It's time to preview in a browser to see what you've achieved. You've obviously got three columns. The line delineating the left column appears to go all the way down the page, doesn't it? That's a trick I used. I created the visual effect of a column by placing the border between the #nav and #content divs on the left side of the #content div (instead of the right side of the #nav div). A div is rather like shrink-wrap in that it will only extend as far as the content within it. So a trick like this works only in a site where you know you're always going to have more content in your center div than you'll have in your left navigation div. And yes, for smaller sites, many times it can work.

But what about the right column where you've placed a background color instead of a border? It's quite obvious that the #news div doesn't extend to the bottom of the content area (see Figure 7). You can't use the same method to make it appear that it does. So there's obviously nothing you can do here. Or is there?

Figure 7. The #news div doesn't yet extend to the bottom of the content area

Page 4 of 7

Previous Page

Next Page