HTML and CSS Reference
In-Depth Information
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
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
Figure 2.9 .
Search WWH ::

Custom Search