News & Education Blog

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!

This entry was posted in Templates, XHTML+CSS. Bookmark the permalink.

6 Responses to Perfect absolute positioning in IE6

  1. Mckenzie says:

    thanks you just saved me 3 hours!

  2. Antoine says:

    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

    Cheers

  3. Chris says:

    Brilliant! Thank you!

  4. rmm says:

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

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

  5. excentricus says:

    Wish I’ve found your site earlier — this crap was bugging the hell out of me. Thanks!

  6. Gate says:

    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 …

Leave a Reply