Floated element not included in parent, causing margin-bottom problems

pymnswene

New Member
Right, so I've got a section of a page:\[code\]<div class="article"> <div class="author"> <img src="http://stackoverflow.com/questions/2588828/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>\[/code\]The \[code\]author\[/code\] and \[code\]abbr\[/code\] divs are floated to the left. Each one of these \[code\]article\[/code\] divs needs to be separated from its siblings by 5px or so. However, the \[code\]author\[/code\] div is extending beyond the technical "height" of the div. The \[code\]margin-bottom\[/code\] is doing nothing, as the space is being taken up by the floated \[code\]author\[/code\].This is somewhat difficult to envision, so I've placed it on a 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.
 
Top