Really Frustrating CSS Stepdown in IE

Question

In my site, I have two divs - right and left. Both are contained within a wrapper div. Here is my code:

#wrapper{
    width:1000px;  
    height:750px;
    margin:auto;
}

#left{
    width:500px;
    height:750px;
    float:left;  
    position:relative;
}

#right{
    width:500px;
    height:750px;
    float:right;
    position:relative;
}

In Chrome, no problem.

In Firefox, no problem.

In Safari, no problem.

In Opera, no problem

In IE, the #right div is in the same location horizontally, but vertically it's below the #left div.

I've tried a few different techniques to remedy this. Setting the wrapper line height to 0, setting the right display to inline, reducing the size of the right and left divs (I thought maybe there was a margin/padding issue). I've run out of ideas now, can anybody offer any help of the issue?

In All Browsers (except IE):

In IE:

Answer 1

Try using float:left for both the #right and #left divs. You could also probably take out the position: relative as well.

Answer 2

put both left and right divs as float:left

Answer 3

There's nothing wrong with the CSS you've posted. It will work in all browsers as expected (I've decreased the widths in my example).

What's happening is that you've got an element in one of your columns that's forcing the width of either #left or #right to be greater than 500px. The easiest way to fix this is to start removing elements until the float drop disappears. Then you can figure out if there's a solution for the offending element (i.e. set its width or set overflow: hidden or scroll).