CODEWITHSUNDEEP
htmlcss
Jesse Hallam
Jesse Hallam

Reputation: 6964

Applying padding or margin to the container of floating content

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:

Upvotes: 0

Views: 174

Answers (4)

Alex W
Alex W

Reputation: 38253

It seemed that it was able to tweak it to work in the following way:

CSS:

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

Moved the margin to be on the bottom div, and changed entry to width: 100%; overflow: auto;. I tested it and it works on Firefox and Opera.

http://www.quirksmode.org/css/clearing.html

Upvotes: 1

ScottS
ScottS

Reputation: 72281

I'm not sure what else may be in your code, but just adding the overflow: auto (or hidden) is working for me in FF, Chrome, and IE7+ on this fiddle. I know you said you tried the first.

Upvotes: 1

Moin Zaman
Moin Zaman

Reputation: 25465

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>

Upvotes: 2

Turnip
Turnip

Reputation: 36742

Add an element (div or span) after your comments and give it clear:both; in your styles.

Upvotes: 1

Related Questions