Unexpected behavior of css float

Question

I just have 3 divs. The 2nd div is floated to the right, and 3rd div appears just below the 2nd.

In the 3rd div, I am setting margin-top property, and this property does not have any effect on the layout.

Question: Can someone explain me understanding this behavior of float?

HTML

<div class="header">
</div>
<div class="sidebar">
</div>
<div class="footer">
</div>

CSS

.header {
    width: 100%;
    height: 80px;
    background-color: #abcdef;
}

.sidebar {
    margin-top: 15px;
    float: right;
    width: 200px;
    height: 200px;
    background-color: #abcdef;
    display: block;
}

.footer {
    clear: both;
    margin-top: 20px;
    width: 100%;
    height: 60px;
    background-color: #000000;
}

Set 3rd div position to relative.

AliK
– AliK

2013-05-15 15:35:16 +00:00
Commented May 15, 2013 at 15:35 — AliK
– AliK, Commented May 15, 2013 at 15:35
@AliK: that doesn't fix anything.

Niels Keurentjes
– Niels Keurentjes

2013-05-15 15:36:15 +00:00
Commented May 15, 2013 at 15:36 — Niels Keurentjes
– Niels Keurentjes, Commented May 15, 2013 at 15:36
fwiw, HTML5 has <header>,<footer>, and <aside> tags

Ryan B
– Ryan B

2013-05-15 15:37:17 +00:00
Commented May 15, 2013 at 15:37 — Ryan B
– Ryan B, Commented May 15, 2013 at 15:37

Niels Keurentjes · Accepted Answer · 2013-06-13 09:29:14Z

5

This is not unexpected at all. The .sidebar is removed from regular flow layout by its float property, as such it doesn't take up any space anymore. The .footer has a clear rule, so it is forced underneath any floats, but that automatically puts it 215px (margin+height of the sidebar) behind the last element that is part of the flow layout. As such its margin requirement of 20px is completely satisfied, and it appears at its logical current position. You can verify this by setting the top margin to 220px instead, it will appear 5px (220-215) below the sidebar.

You can easily achieve the effect you desire by putting margin-bottom:20px on the sidebar since it will then be required to keep that distance to the footer, pushing it down.

edited Jun 13, 2013 at 9:29

answered May 15, 2013 at 15:34

Niels Keurentjes

42.1k9 gold badges103 silver badges138 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

David Ziemann · Accepted Answer · 2013-05-15 15:37:05Z

1

The issue is related to the clear rule.

W3C - An element that has had clearance applied to it never collapses its top margin with its parent block's bottom margin.

Baiscally, if you want to use clear, the general rule is to add an element between the two floated divs to ensure you can correctly space them.

answered May 15, 2013 at 15:37

David Ziemann

9701 gold badge8 silver badges22 bronze badges

Comments

Duncan Beattie · Accepted Answer · 2013-05-15 15:47:10Z

0

The top margin of the footer div is being collapsed, http://www.w3.org/TR/CSS21/box.html#collapsing-margins

If you add margin-bottom to the sidebar instead of the top of the footer it will work.

answered May 15, 2013 at 15:47

Duncan Beattie

2,38619 silver badges17 bronze badges

Comments

mikeswright49 · Accepted Answer · 2013-05-15 15:47:44Z

0

This is caused by the fact that floated elements aren't really there with respect to margin calculations. Your .footer is below whatever unfloated elements are above it, (with a margin of 20px). This issue is caused because margins with respect to floats are calculated relative to other floats, (not all other elements). So to get the desired effect add a margin-bottom element to .sidebar, have a meaningless float added to the .footer, or add a

<div style="clear:both"></div>

between the .footer and .sidebar

edited May 15, 2013 at 15:47

answered May 15, 2013 at 15:37

mikeswright49

3,41622 silver badges22 bronze badges

3 Comments

Niels Keurentjes Over a year ago

Having a 'non-essential' <br> just for the purpose of layout is worse than using a <div> since the first has padding of its own by default.

mikeswright49 Over a year ago

Fair enough. I actually use the padding provided by the br in my layouts. In this case you're right though, and I've edited it to be better for their question.

Niels Keurentjes Over a year ago

In general, CSS3 has enough mature ways to make 'spacer elements' and such obsolete. I haven't used any for several months now (being a professional webdeveloper).

Collectives™ on Stack Overflow

Unexpected behavior of css float

4 Answers 4

Comments

Comments

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related