IE Left Margin Missing Bug

Reading time:
About 1 min

This one has been bugging me for a long time before finding the answer today…

In IE I couldn’t get absolute positioned elements in our left-hand Search pane to appear correctly. The would get pushed onto our right-hand content pane. After thinking about it overnight (well, over multiple nights) I realized that IE was not noticing our negative left or right margins (One True Layout stuff).

A search today reveals the answer from PositionIsEverything

If #wrapper is static or relative, it must have a width, or it and the <DIV> it contains will lose their left margins in IE. If it’s absolute, lack of a ‘width’ will not trigger the bug.

So I went back through and added width:100% or width:998px to the container divs that were position:static or position:relative. Everything now works beautifully!

All of this stems from my desire to use local autocompletion (which requires an absolutely positioned list) to replace a VERY long drop down select list that we have.