Question

<div id="home">
    <div id="logo"></div>
    <div id="foot">
        <div id="one">
            <span id="aaa" class="test">aaa</span>
        </div>
        <div id="two">
            <span id="bbb" class="test">bbb</span>
        </div>

    </div>
</div>


#home {
  width: 400px;
  height: 400px;
}

#logo {
    height: 200px;
    background-color: green;
}

#foot {
   height: 200px;
}

#one {
 height: 200px;
 width: 200px;
 background-color: red;
}

#two {
 height: 200px;
 width: 200px;
 background-color: blue;
 float: left;    
}

.test {
  margin-top: 50px;
  margin-left: 50px;
  background-color: yellow;
}

why in this example float: left doesnt working? and why margin-top set position of #home and not of parents?

LIVE: http://jsfiddle.net/tLuTS/10/

Answer 1

Floating doesn’t work in your example because you need to float both elements that you want on the same line.

So I’ve updated your example with #one and #two floated left. Also added some IE float fixes. http://jsfiddle.net/tLuTS/11/

I’m not sure what you’re trying to achieve using margin-top.