Действительно расстраивает CSS Stepdown в IE

Question

На моем сайте у меня есть два элемента - правый и левый. Оба содержатся в оболочке div. Вот мой код:

#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;
}

В Chrome нет проблем.

В Firefox нет проблем.

В Safari нет проблем.

В Opera нет проблем

В IE div #right находится в том же месте по горизонтали, но по вертикали ниже div #left.

Я пробовал несколько разных техник, чтобы исправить это. Установка высоты строки обертки на 0, установка правого дисплея в ряд, уменьшение размера правого и левого делителей (я подумал, что, возможно, возникла проблема с полями / отступами) У меня закончились идеи, кто-нибудь может предложить какую-либо помощь в этом вопросе?

Во всех браузерах (кроме IE):

в IE:

Answer 1

Нет ничего плохого в CSS, который вы разместили.Он будет работать в во всех браузерах, как и ожидалось (в моем примере я уменьшил ширину).

То, что происходит, это то, что в одном из ваших столбцов есть элемент, который вызываетширина #left или #right должна быть больше 500 пикселей.Самый простой способ исправить это - начать удалять элементы, пока не исчезнет плавающая капля.Затем вы можете выяснить, есть ли решение для нарушающего элемента (т.е. установить его ширину или установить overflow: hidden или scroll).

Answer 2

поместите оба левых и правых деления как float: left

Answer 3

Попробуйте использовать float:left для обоих делений #right и #left. Вы также можете, вероятно, убрать position: relative.