Cross-Browser CSS margin and float positioning

Question

Trying position two divs with the left one being a sidebar that is 200px wide and the right one taking up the rest of the screen. I have this code as an example which works in firefox, but in webkit browsers, there is a weird margin on the right as well as the left. In this example code I set the container width to 600px for easy demonstration, but in actuality I won't know the width of the container div. I'm using 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

Ahhh... well I had div {overflow:hidden;} in my global css. Setting overflow:visible on the content div made it work.