HTML and CSS Reference
In-Depth Information
width: 45px;
}
.pop-item {
padding-bottom: 20px;
float: left;
width: 250px;
}
Allofthepropertieshereareoneswe'veusedordiscussedearlierinthebook.The
.rating
elements are all floated to the left, and each of these is also cleared. This prevents any of the
.rating
element from bumping up against the .
pop-item
elements. The
.pop-item
elements are also floated left, but they're not cleared. As we learned earlier, clearing pushes
the cleared element to a new line, which we don't want to happen to the
.pop-item
ele-
ments. However, we
do
want that to happen to the
.rating
elements. Both elements are
given a set width, and we've added some padding to match what's in the design.
The last thing we need to add to this section is a wrapper
<div>
with a class of
popular
holding all these ratings and recipes together. We'll add some padding to the bottom of this
element, to help keep it separate from the Yummy Tweets section below it:
.popular {
padding-bottom: 40px;
}
What's the future of CSS Layouts?
What we've done in this chapter is use a tried-and-true, cross-browser method for laying out
pages with CSS—namely, using floats. But, as alluded to earlier, the float property was not
created for this purpose (although we're certainly thankful that it works fairly well).
For this reason, the newest browsers have started adding support for CSS layout features that
we hope to be using exclusively in a few years (assuming older browsers that don't auto-up-
date, like IE8 and IE9, die out).
We won't discuss these new layout features in detail here, because those features are still in
flux and browser support isn't as good as we'd like it to be. But we will list some of those
