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

Reminders about floating and clearing

Although I reviewed some tips about floating at the beginning of the article, I want to remind you visually about a couple of them. A float, for all practical purposes, is taken out of the flow of the document. And it isn't "seen" by the parent container. The parent will allow it to flow out the bottom of its container. This "invisibility" to the parent may remind you of an absolutely positioned element. But there is an important difference.

An absolutely positioned element starts at the upper left corner of its parent (or last positioned element). The float begins where you place it in the flow of the page. Both, however, are not seen; thus, their length is not accounted for. With an absolutely positioned element, there's nothing you can do to force it to be seen. With a float, there is. That's what clearing is for. There are a variety of ways to clear a float, but the method I use involves adding a clearing element before the close of the parent element, or placing a clear:both on the #footer div. The .brclear class I discussed in the last article (and that is in the CSS code of your page) can be placed on either a div or a break element. In general I use a div, but there are some cases (usually involving something buggy in a browser) where a break works better. When that happens, I use this:

<br class="brclear" />

If this isn't fully clear, let's look at a visual. You will need a browser other than Internet Explorer to see this. That's because Internet Explorer, wrongly of course, auto-encloses a float (try one of the Mozilla-based browsers).

In Code view, in the bottom of the #content div, highlight a good deal of the text as well as the <div class="brclear"></div>. Right-click and choose Selections > Apply HTML Comment. Save the page. This will simulate a page that has longer side columns with a shorter main content area. Preview the page in your Mozilla-based browser to see the outcome.

You will notice that the right column content is running over the footer and off the end of the page (see Figure 10). The #holder div has no idea it needs to contain it. This is not attractive at all. You may notice another little problem with this faux pas. Look at the #footer where the white text of the #news content runs across it. The #footer has a white background. The text is now, for all practical purposes, invisible in that area. That could be a real problem with a page that has a white background. In fact, in a case like that, you may think the text is completely missing or being cut off instead of simply flowing out of its boundaries.

Figure 10. Text overflow from not clearing the float

Go back into Dreamweaver and uncomment only the clearing element (keep the extra text commented out for now). Refresh your page's preview in the browser. Notice how the #holder is now containing the floated columns even though the main content area still has less content (see Figure 11). The whole design is contained and the extra space is in the #content area, not below the bottom of the #holder. This is a very important point to remember.

Figure 11. Text overflow corrected by clearing the float

One other thing I wanted to illustrate visually for you is float drop. Previously I discussed that if an element is placed inside the #content area and it is larger than the #content area can contain, that portion will drop down below the floats. I created an image you'll find in the image directory of the sample files called float_drop.jpg. Insert it near the top of the page in the #content div. Now view that page in Internet Explorer. IE is the only browser that illustrates this odd behavior but since it's still got the majority, you have to be aware of it.

Let's do the math. Since our overall #holder is 760px wide and the margins on the #content div are each 165px (totaling 330px), you have a total available space of 430px in the #content div. Since the left column is taking up 165px of the horizontal space, the image drops down until the right column text ends so it can grab the extra 20px it needs. Other browsers respect the column sizes and simply overlap the image onto the right column (which may also not be visually desirable either). Figure 12 shows the page in Internet Explorer.

Figure 12. An image causing float drop in Internet Explorer

You may notice that, due to this issue, the #holder in Internet Explorer gets expanded about 20px wider than specified as well. Since you're creating the columns using the faux technique, you can see the unsightly white background peeking out on the right. Removing the background color will, of course, get rid of the ugly appearance in some situations, but the #holder is still being made wider, which can definitely give you trouble in other layouts.

Dreamweaver's own rendering tends to lean toward that of Internet Explorer. It's also been moving more toward web standards with each version. This means that you'll sometimes see more of a hybrid rendering such as what you see in this situation. The Dreamweaver CSS Layout Background view will give you a great view of what's really happening with the #holder div (although it won't show you the float drop).

Figure 13 shows how the holder is being widened. Since the background colors in Dreamweaver are slightly transparent, you'll notice the image is actually increasing the width of the #content div. The right #news div continues to start in the proper place, and the #content div keeps its 165px right margin, so overall the layout is wider. Voilà—your extra space! Avoid placing large elements inside and you can avoid this. (This may mean that if you have clients updating their own sites with Contribute, you'll need to educate them about proper sizing for their layout.) Delete the image and uncomment the text to move on to the next section.

Figure 13. A wide image blowing out the #holder div

Page 6 of 7

Previous Page

Next Page