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

Question

Попытка расположить два деления, при этом левый является боковой панелью шириной 200 пикселей, а правый занимает остальную часть экрана. У меня есть этот код в качестве примера, который работает в Firefox, но в браузерах WebKit есть странное поле справа и слева. В этом примере кода я установил ширину контейнера в 600 пикселей для легкой демонстрации, но в действительности я не буду знать ширину контейнера div. Я использую doctype 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>

Answer 1

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

Answer 2

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