Помещение 2 делителей рядом / Исправлена ​​ошибка с плавающей точкой и отступами (?) В Internet Explorer 6/7

Question

Мне нужно поставить 2 деления рядом. Но что более важно, я хочу, чтобы это правильно отображалось в IE6 / 7. Мне удалось добиться успеха с Firefox, хотя. Мой код:

#container{
    padding:10px;
}

#left{
    float:left;
    width:500px;
}

#right{
    width: 300px;
    float:right;
    padding:7px;
    background-color:#F0FCEB;
}

<div id="box"> 
<div id="left">Some content here</div> 
<div id="right">Some content here 2</div>
<div style="clear:both;"></div>
</div>

Результаты приведены ниже:

Желаемый выход (выход FF):

IE6 / 7 Выход: Как я могу избавиться от этого ненужного заполнения в IE, или есть какой-либо другой метод? Примечание: я использую jQuery и Nifty для jQuery для создания закругленных углов.

Answer 1

Некоторое содержание здесь 2

Что это за содержание? Ваш пример работает как есть, поэтому проблема возникает в самом контенте.

Возможно, она включает форму, как она выглядит на снимке?

имеет верхнее / нижнее поле по умолчанию и то, как свертывание вертикальных полей является причиной некоторой путаницы и различий в браузере (обычно лучше избегать, если это возможно). Итак, правило мини-сброса:

form { margin: 0; }

может помочь.

Answer 2

Не используйте стол! Я часто использую неупорядоченный список для длинных форм. но здесь могут работать 2 div. Убедитесь, что для доступности у вас есть Ara: помеченный как <label>, и вы связываете его с полем ввода

убедитесь, что вы сбросили отступы по умолчанию и поля для элементов, прежде чем выражать свои.

#box label, #box input {margin:0;padding:0;}

Answer 3

Используйте <table>, они являются лучшими для параллельного выравнивания в моем опыте