CSS marginTop not working on DIV while marginLeft works

Question

Possible Duplicate:
Why does this CSS margin-top style not work?

Let's say I have two DIVs, one inside the other (DIV1 -> DIV2), and I define a marginTop property on the inner DIV, it should move DIV2 within DIV1. Instead it moves DIV1 and DIV2 by the # of pixels from the top. Yet marginLeft properly moves DIV2 within DIV1.

    // DIV1
    var x = document.createElement("div");
    x.style.width = "200px";
    x.style.height = "200px";
    x.style.backgroundColor = "red";

    // DIV2
    var y = document.createElement("div");
    y.style.width = "50px";
    y.style.height = "50px";
    y.style.backgroundColor = "black";
    y.style.marginTop = "10px";
    y.style.marginLeft = "10px"

    document.body.appendChild(x);
    x.appendChild(y);

enter image description here

Why does this happen?

@BoltClock Yep seems to be my issue :) Thank you – user1019031 May 08 '12 at 19:38 — user1019031, May 08 '12 at 19:38

score 3 · Answer 1 · answered May 08 '12 at 19:36

3

Setting an overflow: hidden; on the red <div> should correct that

answered May 08 '12 at 19:36

Probocop

10,346
28
85
115

Yes. I offer an explanation on why this works in my answer to the duplicate question. – BoltClock May 08 '12 at 19:39

CSS marginTop not working on DIV while marginLeft works

1 Answers1