Ignoring TOP of Absolutely Placed DIV

Here’s the scenario. You have a container DIV that is relatively placed. Inside the container you have an absolutely placed DIV and a static DIV. For some reason the TOP attribute of the absolutely placed DIV is ignored and it seems to inherit the TOP margin of the relatively placed DIV.

For some reason, if the container has a border, the attributes are rendered properly. Like a lot of you, I put a border on elements while I am developing to help with placement. So when I removed the border of the container the layout goes to crap.

One fix is to add:

<br clear=”all” />

right after the opening DIV for the container. This works but it causes FireFox and Safari to miscalculate the top margin of the relatively placed DIV.

I also added:

<br clear=”all” style=”margin:0; padding:0″ />

But that didn’t work.

I added 1px of padding to the top of the container DIV and that worked.