Ever try to absolute position a div in IE6 and have it not do 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 the meeting, but I still didn’t have an answer to my dilema. Last night I spent another 2 hours on this and finally came up with an answer. For some God unknown reason IE6 needs the div to be nested into another div and then absolute position the inner div… sometimes! If I moved my div to other parts of the xhtml then it would work 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 allows the inner div to be positioned correctly. In a perfect world you can wrap things in one div, but IE makes this not a perfect world, so when in doubt… wrap it!