• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint

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 declaration—clear: 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;
}


					  


PREVIEW

                                                                          

Not a subscriber?

Start A Free Trial


  
  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint