Sams Teach Yourself CSS in 10 Minutes

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, can be changed to 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 > <img src="/books/3/463/1/html/2/chapter12c.jpg" alt=""> <p>A flower from my garden</p> </div> <div > <img src="/books/3/463/1/html/2/chapter12c.jpg" alt=""> <p>A flower from my garden</p> </div> <div > <img src="/books/3/463/1/html/2/chapter12c.jpg" alt=""> <p>A flower from my garden</p> </div> <div docEmphStrong">clear"> <img src="/books/3/463/1/html/2/chapter12c.jpg" alt=""> <p>A flower from my garden</p> </div> <div > <img src="/books/3/463/1/html/2/chapter12c.jpg" alt=""> <p>A flower from my garden</p> </div>