Floated element not included in parent, causing margin-bottom problems
- by Christian Mann
Right, so I've got a section of a page:
<div class="article">
<div class="author">
<img src="images/officers/john_q_public_thm.jpg" />
<span class="name">John Q. Public</span>
<span class="position">President</span>
</div>
<abbr class="postdate">
<span class="month m-01">Jan</span>
<span class="day d-31">31</span>
<span class="year y-2009">2009</span>
</abbr>
<div class="content">
<h2 class="title">Article Title</h2>
<p>Pellentesque habitant morbi...facilisis luctus, metus</p>
<p>Pellentesque habitant morbi...facilisis luctus, metus</p>
</div>
</div>
<div class="article">...</div>
<div class="article">...</div>
The author and abbr divs are floated to the left. Each one of these article divs needs to be separated from its siblings by 5px or so. However, the author div is extending beyond the technical "height" of the div. The margin-bottom is doing nothing, as the space is being taken up by the floated author.
This is somewhat difficult to envision, so I've placed it on my web server
Is there any way to force the parent to be at least as tall as all of the floated elements within?
If anyone figures out what I'm saying, thanks.
