Кросс-браузерное поле CSS и плавающее позиционирование

Попытка разместить два элемента div, при этом левый является боковой панелью шириной 200 пикселей, а правый занимает остальную часть экрана. У меня есть этот код в качестве примера, который работает в firefox, но в браузерах webkit справа и слева есть странное поле. В этом примере кода я установил ширину контейнера на 600 пикселей для простоты демонстрации, но на самом деле я не буду знать ширину контейнера div. Я использую тип документа XHTML 1.0 Transitional.

<style type="text/css">
#container {
  height:50px; width:600px; background-color:black; overflow:hidden;
}
#sidebar {
  height:50px; width:100px; background-color:lightgreen; float:left;
}
#content {
  height:50px; margin-left:100px; background-color:lightblue;
}
</style>

<div id="container">
  <div id="sidebar"></div>
  <div id="content"></div>
</div>

person tybro0103    schedule 03.03.2011    source источник
comment
Мне вполне нормально. Я добавил его в JsFiddle jsfiddle.net/chprpipr/9fuDw Единственное изменение, которое я сделал, это удалить отступ в 10 пикселей, который содержался в этом теле, но я думаю, что это стиль, который мог добавить JsFiddle.   -  person chprpipr    schedule 03.03.2011
comment
@chprpipr хммм... выглядит хорошо... может быть, это просто мой тип документа?   -  person tybro0103    schedule 03.03.2011
comment
Я обновил тип документа до XHTML 1.0 Transitional в скрипте, но он по-прежнему выглядит хорошо. Может быть, сравнить ваш тип документа со скрипкой, чтобы увидеть, есть ли синтаксическая ошибка? Или вы можете скопировать свой код в скрипку и воспроизвести его там?   -  person chprpipr    schedule 03.03.2011


Ответы (1)


Ааа... ну, у меня было div {overflow:hidden;} в моем глобальном css. Установка overflow:visible в div контента заставила его работать.

person tybro0103    schedule 03.03.2011