Question

Consider the following html structure:

<div class="entry">
    <h1>Title</h1>
    <p>...</p>
    <p>...</p>
    <div class="tagged">...</div>
    <div class="comments">...</div>
</div>

The css is:

.taggged { float: left; width: 50%; }
.comments { float: right; width: 50%; text-align: right; }
.entry { margin-bottom: 30px; }

The issue is that the margin (or padding, if applicable) does not render at the bottom of the .entry element. What I’ve tried overflow: auto on the .entry and various permutations of clear:

Answer 1

I’d try

.entry { overflow:hidden; margin-bottom:30px; }

Another thing that works better in my experience, is to have the right floated element first in the source order, like this:

<div class="entry">
    <h1>Title</h1>
    <p>...</p>
    <p>...</p>
    <div class="comments">...</div>
    <div class="tagged">...</div>
</div>