Reputation: 17565
i have a css page with “float:right; clear:right
” for ads and several blocks in the main text that is meant to flow like images, using “float:left”. The problem is that the main text flowbox has a large gap: they start to show only after the ad boxes that has float:right.
here's a test page : Link
I can't understand this. Can anyone explain?
Upvotes: 4
Views: 5766
Reputation: 1
The gap generated by body margin;
Solution:
body { margin: 0; }
Most css reset tools has this rule.
Upvotes: 0
Reputation: 181
The gap is caused by your clear: right on the 2nd adbox, and the fact that the flowboxes follow the adboxes in the document order.
If you wish to have the boxes at the bottom "flow" next to the paragraphs, place them just before the paragraph tag you wish them to float next.
Upvotes: 0
Reputation: 228302
I'm struggling to think of better words to explain why than "that's just how it works".
The easiest way to fix it is to enclose the two "ad boxes" in their own div
with float: right
:
<div style="float: right;">
<div class="adbox1">adbox1</div>
<div class="adbox2">adbox2</div>
</div>
Upvotes: 2