CODEWITHSUNDEEP
htmlcss
Ron Corazon
Ron Corazon

Reputation: 45

"margin-top:auto" isn't working

<div id="home">
    <div id="fix">aaa<br />fff</div>
    <div id="text">bvvvbbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb  </div>
</div>

#fix {
    width: 500px;
    position: fixed;
    background-color: blue;
    top:0;
    left:0;
}
#text {
    background-color: green;
    margin-top:auto;  
    width: 500px;
    height: 700px;
}

Why doesn't margin-top work in this example?

(In div#fix, the data is generated automatically with PHP.)

Demo: http://jsfiddle.net/uK2RK/9/

EDIT: Now div#fix cover to div#text. I can set margin-top, but i dont know how many lines this have, but this is generated automatically with PHP.

Upvotes: 0

Views: 589

Answers (1)

Quentin
Quentin

Reputation: 943470

It is working as it is supposed to (you didn't say how you think it is supposed to work).

As per section 10.6.3 of the CSS 2.1 specification a margin-top with a value of auto on a block-level non-replaced element (such as a div) in normal flow (which #text is) with overflow: visible (the default) is treated as margin-top: 0.

The element is therefore positioned 0 pixels (unless there are other margins/paddings in play, which there are not) away from the bottom of the previous element in normal flow. Since the only previous element (#fix) is position: fixed and thus not in normal flow, there isn't such an element so #text gets placed 0 pixels away from the top of its container (#home). This position happens to be underneath #fix.

Upvotes: 3

Related Questions