Page Layout with CSS - HTML5 with CSS3 - page 312

no offset. The element's new position is relative to where it would have been before it was repositioned,
but any surrounding content will still flow as if the element were in its original spot.
To demonstrate relative positioning we'll start with the markup in Listing 9-5, just a bit of text with an inline
image, wrapped in an article element.
Listing 9-5. The markup we'll be styling with relative positioning
<article class="comment">
<img src="images/avatar.jpg" alt="" class="avatar">
<p>Having foiled a jewelry store heist on my way to receive a
medal from the President, imagine my embarrassment to notice
a nasty laser burn on my cape. There was no time to fly back to
base and change into my spare costume, even at my speed. Thank
goodness for Power Outfitters! They had my size and style in stock,
in just the right shade of red, and at a great price, too. I went
back after the ceremony and bought five more capes, plus matching
gauntlets!</p>
</article>
First we'll give the containing article element a bit of style with a background, padding, and a border.
We'll also set some margins on the paragraph inside, overriding any default margins with values of our
own (most browsers add margins to both the top and bottom of paragraphs, but we want a margin on the
bottom only). And finally we'll float the image, just like you saw back in Chapter 5:
.comment {
background-color: #e6f2f9;
padding: 15px 15px 0;
border: 1px solid #98b8cd;
margin: 0 0 15px;
}
.comment p {
margin: 0 0 15px;
}
.avatar {
float: left;
}
Figure 9-13 shows you what we have so far.