html/css irritating default behaviour

Question

Here's the problem :

I have 2 div - The first one has a float:left - The second one has a margin-top

Now why, WHY does that margin-top is also applied to the first div ?

Here's a demo with background colors to get the idea :

http://dl.dropbox.com/u/4225936/whyyyyy.htm

-Edit : I'm not looking for a solution but for an explanation of this behavior. Thanks everybody :)

Answer 1

give float:left; for the second div also

<div style="background: none repeat scroll 0% 0% red; margin: 0pt;">
<div style="background: none repeat scroll 0% 0% green; float: left;">hello</div>
<div style="background: none repeat scroll 0% 0% gold; margin-top: 50px; float: left;">hello</div>

here the result.

Answer 2

You can use padding-top instead of margin-top

Answer 3

You're running into something called margin-collapse.

If two margins are adjacent, the larger one will take precedence. Since the margin on your second div is adjacent to the margin on your container div, those margins collapse, and the larger one (50px) takes precedence, and affects them both.

If you add a top padding to the container, the effect will be removed because the margins are no longer adjacent.

Edit: Note that "larger" is sometimes not exactly right. A negative margin takes precedence over a zero margin, for instance. I haven't tested exactly what the calculation is, so take "larger" with a grain of salt.