CODEWITHSUNDEEP
htmlcssmargin
Christian Mann
Christian Mann

Reputation: 8125

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

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 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.

Upvotes: 1

Views: 375

Answers (3)

tloflin
tloflin

Reputation: 4050

In addition to the above hacks, you can set overflow:auto; on the article divs, although this might have side effects depending on what other rules you have on those divs. But it prevents you having to add elements to the HTML.

Upvotes: 2

vinhboy
vinhboy

Reputation: 8982

You can put this at the bottom/inside of the div.article (right before closing the div)

<div style="clear:both;"></div>

Or do this:

http://www.sitepoint.com/blogs/2005/02/26/simple-clearing-of-floats/

Upvotes: 1

Chris
Chris

Reputation: 27394

You need to add a clearing element after your floating elements. Something like this usually works <br clear="both"/> which will clear both left and right floats and "pad out" your containing element.

You can specify both, left and right which clear all floating elements, left floating and right floating accordingly.

Upvotes: 0

Related Questions