Set a Float to Fix a Float
A container will stretch around floated elements within it, as long as the container is also floated. So we float each dl left to force each teaser below the floated image above it.
We also float the entire div sweden to make sure that its border will enclose everything floating within it. However, we also remember that if the container of floated elements does not have a width specified, it will "shrink wrap" the contents. So we have to specify a width for the dl element of 260 pixels - that is, the width of the div (300 pixels) less the margins (2 x 20 pixels.) We also add the "display:inline" declaration because IE will double the margins if we don't.
Finishing Touches
We'll add a right margin to the image, subtracting that amount from the width of the dt elements. Just to purty it up some more, we can add a frame around each picture. We also have to subtract the frame widths from the width of the dt.
Toggling the Float Direction
Remember we said that this could look like a magazine layout? It would be nice to be able to have one teaser aligned left and the next aligned right. We can do this by adding a class of "alt" added to the dl.
An Alternate Way to Fix the Float: the Overflow Property
Applying the overflow property to a container will self-clear any floats within it. In our example, we take out the floats from each dl element and replace them with overflow:auto. See the style sheet for page 4, float2.css, in which we also remove the display:inline rule, because we don't need it anymore as there is no float margin for IE to double.
Most of the time, this trick will work. However, there are some situations in which it could become problematic - for instance, if the content of the container is wider than the container, you will get scrollbars (because we are using the value "auto.") We could say overflow:hidden, which will hide content that exceeds the container's width, but you might not want that either. If you are sure that neither one of these applies, knock yourself out.
Yet a Third Way to Fix the Float: Using Generated Content
Ok, fair warning - this method relies on a couple of hacks to make it work with IE5-6 and IE7. Honest, I won't tell if you don't.
This method uses the :after pseudo class in CSS to insert a period after the container of floats. The clear:both rule is used to clear all floats, and then the period is hidden. Here's how:
First, we create a declaration of #sweden dl:after, and make the content a period, display:block, a height of zero, clear:both and visibility:hidden. This places a period after each dl element, has it clear the elements above it, and makes it invisible. There's only one problem: It won't work in IE, which I know will shock you. How to cope?
As it turns out, we take advantage of some non-standard behavior of IE 5 and 6: these browsers will do their own autoclearing on containers as long as the containers have dimensions. This has historically been called The Holly Hack, named after Holly Bergevin, the author. First, set the height of the dl to 1%, which will force the container to expand around its contents, even floated elements. Never mind that the container will exceed 1% - it will expand as needed, ignoring the height rule, again incorrect behavior, but it helps us here. You target this at IE5 and 6 only by means of the * html selector. See the style sheet.
But I use IE 7, you say. Well, IE 7 did fix the 1% bug, so it will correctly honor that dimension. What is more, IE 7 ignores the *html selector - also proper. But dadgum it, IE 7 STILL doesn't support the :after (or :before) pseudoclass. We have to try something else, because we can't use the fixes that worked before and it still won't work properly.
We use this code: *:first-child+html #sweden dl, giving it a min-height of 1px. That has the same effect on IE 7 as the 1% has in the earlier versions: it expands a container to hold its contents, and it only hits IE 7. So there. So take a look at the style sheet.