Perfect absolute positioning in IE6

Ever try to give a div an absolute position in IE6 and find out it’s not doing anything your CSS is telling it to do? I found out why!

Yesterday I was working on a really advanced CSS layout for a client and there were 2 elements that needed to be absolute positioned. I did it as usual, expecting the outcome to be what it should be, except IE6 was positioning it in the bottom left instead of bottom right and without any of the layout I had on the div! I spent 3 hours trying different things just to have it presentable for a meeting, but I still didn’t have an answer to my dilemma. Last night I spent another 2 hours on this and finally came up with an answer. For whatever reason, IE6 needs the div to be nested into another div. Only then can you absolute position the inner div… sometimes! If I moved my div to some parts of the xhtml it worked as intended, but in certain places it was inheriting something from a div around it (NOT inside it). I couldn’t find any reasonable explanation for why it worked in some areas and not others, but I did realize that whatever it was, the outer div absorbed it and allowed the inner div to be positioned correctly. In a perfect world you can wrap things in one div, but the existence of IE means this is not a perfect world. When in doubt‚ wrap it!

The Core Team
Editorial Staff Members at 'corePHP'
Editorial staff for the Core Technology Blog for 'corePHP' - news, views insights and advice for e-commerce, marketing technology , web design and development.

6 thoughts on “Perfect absolute positioning in IE6

  1. Antoine

    I think it’s because of the different floating elements in the page you have.

    A simpler solution is to add clear:both, or left/right to your absolutely positioned element


  2. rmm

    I recall my mother giving me that last line as advice once…

    Thanks, this article saved me many hours of cursing at my screen.

  3. Gate

    Seriously, i’ve just spent more than 2 hours on the problem, and impossible to find a solution.
    Thanks to you, my website is compatible IE6.

    Thanks a lot !

    Sorry for my english, i’m french …

Comments are closed.