6 replies [Last post]
abus
abus's picture
Offline
Regular
Turkey
Last seen: 12 years 43 weeks ago
Turkey
Joined: 2007-09-24
Posts: 14
Points: 0

Hi,

This is my CSS

#div1, #div2 {background-color:#000;width:50%}

#div1 {float:left}

#div2 {float:right}

#div3 {width:100%}

And this is my html

Div 1
Div 2
Div 3

What is the best way to clear the floats of div 1 and 2?

Should I just insert a div which has clear:both on it between div 2 and 3? Or how can I achieve this without using structural markup?

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 41 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

#div3 {clear:both;} Is all

#div3 {clear:both;} Is all you should need to ensure that div3 falls below the two floats.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 6 years 1 week ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

I would've thought #div3

I would've thought #div3 would clear the other two without clear:both because the other 2 take up all available space?

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

abus
abus's picture
Offline
Regular
Turkey
Last seen: 12 years 43 weeks ago
Turkey
Joined: 2007-09-24
Posts: 14
Points: 0

it does in IE, but in FF it does not

#div3 {clear:both;}

Above code was the first thing, I have tried. It works fine in IE but not in FF. So I need a better solution.

(The reason I am telling is that when div3 has clear both, I also give it a margin-top:10px. It works in IE but in FF it does not give a margin at all. I need to give values like 50px to margin-top to see a margin in FF.)

Thanks for your answer

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 6 years 1 week ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Make it a margin-bottom on 1

Make it a margin-bottom on 1 & 2 instead of a margin-top on 3.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

abus
abus's picture
Offline
Regular
Turkey
Last seen: 12 years 43 weeks ago
Turkey
Joined: 2007-09-24
Posts: 14
Points: 0

Thank you very much for the

Thank you very much for the idea. Now it works right.

Best Regards

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 41 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Tyssen wrote:I would've

Tyssen wrote:
I would've thought #div3 would clear the other two without clear:both because the other 2 take up all available space?

Smile good point!

The solution has been provided , but the margin top wouldn't have worked unless equal to plus a bit of the float elements heights.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me