gif) 27% 0 repeat-y;
THE ESSENTIAL GUIDE TO CSS AND HTML WEB DESIGN
382
}
#sidebar {
float: left;
width: 24%;
margin-right: 4%;
}
#mainContent {
float: left;
width: 72%;
}
Next, the .itemContainer rule defines a border and margin at the bottom of the
itemContainer divs. This is overridden for the last of the three containers by the
.lastItemContainer rule to avoid a double underline (as explained earlier). The
.itemContainer:after rule is essentially the same as the clearFix rule (see the ???Clearing
floated content??? exercise in Chapter 7), clearing floated content so that the
itemContainer divs don??™t stack incorrectly. The .itemImage rule floats the divs containing
the images right, adding some bottom and left margins so that other content doesn??™t
abut them. Finally, the hr rule defines settings for the horizontal rule (although note that
Internet Explorer deals with hr margins differently from other browsers, making them
larger??”this will be dealt with via conditional comments).
In the navigation section, the first three rules define colors for default, visited, and
hover/focus link states, while the next three style the pull-navigation. The #pullNav rule
floats the pull-navigation list right and adds some right padding, while #pullNav li sets
the list items within to display inline, adding the vertical-bar.gif image as a background
and some padding. The ul#pullNav li:first-child rule then removes the background
from the first of the list items.
Pages:
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490