Firefox is interpreting 'margin' the wrong way

programming web dev
1

In IE everything is fine, but in firefox… the inner div is not 100px away from the outer div’s border… it’s sitting right next to it… and firefox is applying the 100px margin to the top of the page… not the containing div… how to get rid of this ?


<body>
<div style="background-color:#0066CC; height:600px;"><div style="margin-top:100px;">inner div</div></div>
</body>
2 
<div style="background-color:#0066CC; height:600px;padding-top:100px;"><div>inner div</div></div>

<div style="background-color:#0066CC; height:600px;"><div style="position:absolute;top:100px;width:100%;">inner div</div></div>

Theres a few ways to do it.

3

yea but it should work with just margin-top: 100px; on the inner div… can you post a link to the html on a server tanel96?

4

http://fritz.planet.ee/margin.html here it is… everything is fine in IE… the white div is offset properly, but in FireFox… the white div is right at the top… AND the offset is calculated from the top of the page.

I know the code does not validate… it’s just to show you the problem.

5 

<div style="background-color:#0066CC; height:600px;">

==


<div style="background-color:#0066CC; height:600px; overflow: hidden;">

OR optionally

<div style="margin-top:100px; float: left;">inner div</div>