Creative Floating
We are going to use definition lists and a lot of CSS to get a grid effect, used to position elements on a page. This was formerly done most often with tables and spacer gifs, but we are much too cool for that.
We often have a need to place elements along the side of a page as illustrations of content found on interior pages. There is a decorative aspect to this, and you might compare such a layout to a magazine cover. This example places three "teasers", each one consisting of a title, an image, and a description, in an alternating sequence. You can probably imagine a number of uses for such a collection of layout elements.
Getting started
First, we create three definition lists. We use the dd (definition) elements to contain both the images and the descriptions. We're going to need these elements when we apply the styling; however, they are perfectly valid in themselves and easily read even if styles are turned off. Here are the styles we apply:
First, a defined width of 300 pixels and a 2 pixel solid blue border for the collection of "teasers." This will set the collection off from the rest of the page. Then, for later use, we give a class of "img" to the dd elements that contain the images. (The class name is arbitrary, but you want something that makes sense. Life is hard enough.)
Now we add base styles for each teaser group. We will handle positioning a little later. We want a nice even 20 pixels of space around the groups [title-image-description] and on the inside of the box, so we apply:
- 10 pixels of padding to the top and bottom of the containing div "sweden."
- 10 pixel margins to the top and bottom of each dl, and 20 pixel margins on both the right and left of each dl.
- We use margins rather than padding to avoid the IE5 / Win problems [subtracting padding rather than adding it.]
Now we add some color and text treatments to the titles of each teaser by styling the dt elements. A nice slate blue, not that you can see it, with letter spacing and 130%, adds some style without needing graphics.
Let's jazz up the dd elements too. We make the text smaller and gray (hmmm, I thought I said "jazz it up") and increase the line-height to 150% of normal, making it easier to read. We also remove the default indenting that the browser applies to dd elements by zeroing out the margins and padding.
Positioning the elements
We are really trying to get these teasers to alternate their positions on the left and right sides of the page, with the title on the same line as the image. But first, let's just line them up on one side - the left.
You might think that if you just float the teasers left, you will get what you want. Yes, but.....no. If we do that we will always have the title sitting ABOVE everything else, not at the same level as the image. This is due to the order of things in the markup. The image is after the title. If you reverse the order of the elements and put the image in the dt element, with the title and description in the dd elements, you will be using non-semantic code.
The solution is to use opposing floats within the div sweden. First, we float the dt elements to the right and the images to the left. This works, but now the description text has slipped in between the image and the title.
We fix this by assigning a width to the dt elements, which forces them to span across the top of each description on their own lines. We need to do a little math to get the width right, but this is simple as we know the width of the div sweden = 300px. So:
300px
-40 px, or 20 pixels on each side of the div
-102 px, the width of the images
= 158px.
All of this is fine unless the description is short enough to allow the next teaser in line to get out of position. After all, when we float an element, we take it out of the normal document flow, and so it may float out of the spot you put it in. The images are floated, so that they are not "holding the container open," and neither is the definition term (dt) because it is floated too. How do we deal with this?
There are several ways to make self-clearing floats, using just CSS. Self-clearing floats will keep the container independent - as a module - meaning that you can move it around and change it without losing its integrity. Let's look at three ways to do it.