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; }