I am trying to build a comments section for my website. In the comments section, I want it laid out WordPress-style, with the avatar to the left. It works, but what is happening is the comment text is wrapping around the avatar underneath. For an example, here. This probably has a simple solution to it but I am a CSS amatuer. This is the relevant XHTML and CSS:
<div class="comment">
<div class="left">
<img src="images/noavatar.png" alt="No Avatar" />
</div>
<div class="right">
<h3>Laura Brauman</h3>
<span>12 March 09</span>
<p>Nunc ultrices nisi ut tellus. In placerat tempus quam. Nulla dolor nulla,dictum eget, auctor a, rutrum sit amet, ante. Sed scelerisque est. Vestibulum arcu purus, dignissim nec, rhoncus id, sodales eu, quam. Nullam congue hendrerit enim. Phasellus risus. Pellentesque lacus sem, luctus tempus.</p>
</div>
</div>
/*------- COMMENTS -------*/
#comments
{
width: 91px;
height: 18px;
background: url(images/comments.png) no-repeat;
text-indent: -9000px;
margin-bottom: 10px;
}
div.comment
{
padding: 5px 5px 30px 5px;
background: url(images/commentbar.png) bottom center no-repeat;
margin-bottom: 10px;
}
div.comment div.left { margin-left: 10px; float: left; width: 51px; }
div.comment div.right { width: 482px; }
div.comment div.right h3 { color: #e6267c; font-size: 18px; display: inline; text-transform: uppercase; }
Best Answer
From the spec:
That means elements with
display: block
that are not positioned ignore the float.That means inline elements do flow around floats. That's why your
<span>
and the text within<p>
flows arounddiv.left
, even though the<p>
anddiv.right
do not.And, that - obtuse as it is - is the answer to your problem. You must insert a "new block formatting context".
The easiest of these for you is1:
Note that you probably also want1:
To fix a related, but different problem. If your
<p>
content is shorter than your image, then the floateddiv.left
will not expand the height ofdiv.comment
. Addingoverflow: auto;
takes you into the aptly named Complicated Cases portion of the spec:Which basically says that floats only expand
overflow <> visible
containing elements.1
overflow: hidden;
would also work, but would crop content instead of throwing scrollbars if needed.