CODEWITHSUNDEEP
htmlcss-float
Xah Lee
Xah Lee

Reputation: 17565

CSS float left/right clear problem: large gap

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

Answers (3)

user6101521
user6101521

Reputation: 1

The gap generated by body margin;

Solution:

body { margin: 0; }

Most css reset tools has this rule.

Upvotes: 0

mongo296
mongo296

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

thirtydot
thirtydot

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

Related Questions