Positioning the <div> Elements

Positioning the <div> Elements

Because the images and captions will sit beside each other in rows, you will need to float the <div>. This can be achieved using float: left.

When the <div> is floated, it must be given a width. In this case, you will use width: 130px. This width can be changed to suit your needs.

Next, you might want to create some space around the <div> elements so that they don't butt up against each other. You can achieve this by applying margins to the right and bottom of each <div>.

Finally, a background image (shown in Figure 12.1) will be added to the <div>. As you can see in Figure 12.1, the image is very long so that it is able to grow to accommodate long captions.

This background image must be set to no-repeat because you don't want it to reappear under the caption. The CSS code is shown in Listing 12.3 and illustrated in Figure 12.2.

Listing 12.3. CSS Code Floating the Container

div.thumbnail
{
    width: 130px;
    float: left;
    margin: 0 10px 10px 0;
    background: url(chapter12a.gif) no-repeat;
}

Figure 12.2. Screenshot of positioned containers.

Liquid and Fixed-Width Layouts The floated <div> elements you have created will sit in a line beside each other, depending on the width of your browser window. If you decrease the width of your browser, one or more <div> elements may drop to a new line below. This happens because the <div> elements have no container apart from the browser window. This type of layout is referred to as a liquid layout. However, you can stop the <div> elements from dropping to new lines. If you place them inside a fixed-width container, they will remain in positionno matter how narrow the browser window. This type of layout is referred to as a fixed-width layout.