Forcing a New Line

Forcing a New Line

There may be situations when you want to set a number of thumbnails on each line. To do this, you need to create a new class and then apply this class to specific <div> elements. The new class will have one declarationclear: left. This will move the <div> down to a new line, below the bottom edge of any previous left-floating <div> elements. The CSS code is shown in Listing 12.6.

Listing 12.6. CSS Code Forcing a New Line

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

div.thumbnail img
{
    border: 1px solid #777;
    margin: 10px 0 0 10px;
}

div.thumbnail p
{
    margin: 0;
    padding: 0 20px 30px 10px;
    background: url(chapter12b.gif) no-repeat 0 100%;
}

.clear
{
    clear: left;
}

This new class will need to be added to any <div> that must start on a new line. The simplest way to add this new class is to include it in the existing class attribute. So, class="thumbnail" can be changed to class="thumbnail clear" as shown in Listing 12.7. The final results can be seen in Figure 12.6.

Listing 12.7. HTML Code Showing New Class

<div class="thumbnail">
    <img src="chapter12c.jpg" alt="">
    <p>A flower from my garden</p>
</div>
<div class="thumbnail">
    <img src="chapter12c.jpg" alt="">
    <p>A flower from my garden</p>
</div>
<div class="thumbnail">
    <img src="chapter12c.jpg" alt="">
    <p>A flower from my garden</p>
</div>
<div class="thumbnail clear">

    <img src="chapter12c.jpg" alt="">
    <p>A flower from my garden</p>
</div>
<div class="thumbnail">
    <img src="chapter12c.jpg" alt="">
    <p>A flower from my garden</p>
</div>