HTML and CSS Reference
In-Depth Information
</div>
Currently, the
<h2>
and
<p>
elements in each of these
.media
sections are appearing be-
low the image in the
.media
section. You'll remember from our discussion of block versus
inline elements that this happens because all block elements will naturally drop below other
elements placed before them in the markup. We can override this behavior using
float
and
clear
:
.media {
clear: left;
padding-bottom: 28px;
}
.media img {
float: left;
margin-right: 30px;
}
Here we've floated the image left, which causes the text content to bump up against it. We
also need to clear the
.media
element to ensure that it doesn't get affected by the floated
images.
We've also added a right margin to the image and bottom padding to the
.media
element
to match what's in the design mockup. However, you'll notice when you apply these styles
that the padding at the bottom of the
.media
element doesn't seem to appear, as shown in
