DIV, плавающий вправо, отображается в центре, а левый - ниже.

Question

У меня есть основной контент DIV шириной 960 пикселей и два плавающих элемента DIV внутри.Вот его упрощенная версия:

<div id='content'>
    <div id='main_data'>
       ....Data....
    </div>
    <div id='sidebar'>
       ....data....
    </div>
</div>

И CSS:

div#content { width: 960px; position: relative }
div#main_data { float: right; width: 755px; }
div#sidebar { float: left; width: 190px; padding: 4px }

Кажется, что DIV #main_data центрируется в #content, а #sidebar кажется плавающим слева, но ниже #main_data.#content не имеет заданных полей или отступов, и даже с учетом 4-пиксельного отступа в #sidebar, ширина поплавков не превышает 960px.

Это нормально работает в Firefox, IE8, Chrome, Safari и Opera -но не в IE7 и IE6.

Я должен добавить, что если я поменяю позицию в DOM, они отображаются правильно - я пытаюсь сделать этот сайт более доступным для SEO, поместив более подходящую информацию в #main_dataближе к верхней части документа (Wikipedia делает то же самое, когда левая боковая панель появляется позже в источнике).

Answer 1

Интересно, я точно скопировал ваш код, добавил корневые html-теги и некоторый текст Lorem Ipsum вместо «... data ...» и увидел совершенно противоположный результат: ожидаемое поведение в IE7, но не в FF 3.5.

Решением для меня было поиграться с полями и отступами обоих дочерних элементов div, пока макет не будет выглядеть корректно во всех браузерах.В частности, я снизил отступы боковой панели до 3px и явно установил поля двух других div-ов на 0px.Но, учитывая, что мои первоначальные результаты были противоположны вашим, я думаю, это может отличаться и для вас.

Answer 2

Я не совсем уверен, что вы пытаетесь сделать, поэтому сначала вы должны прояснить это, но я думаю, что вы упускаете такой явный элемент, как <br style="clear:both; / '>

 <div id='content'>
   <div id='main_data'>
      ....Data....
   </div>
   <div id='sidebar'>
      ....data....
   </div>
   <br style='clear:both;'/>
</div>


#content { width: 960px; }
#main_data { float: right; width: 755px; }
#sidebar { float: left; width: 190px; padding: 4px }