HTML and CSS Reference
In-Depth Information
Figure 2.9. Our .media images floated left, but the bottom padding has failed to take effect
This is due to the
float
property. As discussed earlier in the section on clearing floats, a
parent element will expand vertically to contain only content that is non-floated. To fix this,
we would need to add our
cf
class to all the
.media
elements.
Unfortunately,doingthiswouldaddalotofextraHTMLthat,inthisinstance,isn'tnecessary.
So to clear the floats here, we're going to use a different method—the
overflow
property
set to a value of "
hidden
":
.media {
clear: left;
padding-bottom: 28px;