The "infamous" CSS: 2 divs side-by-side, crossbrowser edition(?)

Question

My problem design is seen here (using browser not IE). And the target design is observed in browser IE. It is a basic design consisting of 4 divs: A parent container div, a 'left' div, a 'right' div (content: image and some text), and a 'bottom' div (naturally, meant to follow below the top two divs).

The obvious problem is that the 'right' div is not positioning correctly! It is supposed to be floating to the right of the 'left' div. I of course designed the layout only with CSS, and posted it assuming the code did not need any cross-browser tweaks.

So the million-dollar question is... "What's missing in this code?"

<link rel="stylesheet" type="text/css"href="http://everprint.com/css/ebay3.css" media="screen" />
<div id="container">
  <div id="topbanner" class="title">[subject]</div>
  <div id="leftbar">[logo]<br />[business]</div>
  <div id="centralbar">
    <div style="text-align:center;">[main image]</div>
    <div id="ProductDetail" class="indented">[main text]</div>
  </div>
  <div class="style:clear;"></div>
  <div id="bottombar">[business speak]</div>
</div>

And the pertinent CSS: body { margin: 0; padding: 0; text-align: center; }

#container {
  margin: 2px auto;
  text-align: left;
  width: 762px;
  height:700px;
  border: 2px dotted #777744;
}

#topbanner {
  margin: 2px;
  padding: 2px;
  border: 1px solid #777744;
  text-align:center;
}

#leftbar {
  float: left;
  width: 200px;
  height: 500px;
  margin-left: 2px !important;
  margin-left: 1px;
  padding: 2px;
  background: #f4f4f0;
  border: 1px solid #777744;
}

#centralbar {
  float: left;
  width: 547px;
  height: 565px;
  margin: 0 2px;
  padding: 2px;
  border: 1px solid #777744;
}

#rightbar {
  float: left;
  width: 200px;
  height: 565px;
  padding: 2px;
  background: #f4f4f0;
  border: 1px solid #777744;
}

#bottombar {
}

Answer 1

Everything is too wide. It's all packed into a container of width 762 pixels, while just your #leftbar and #centralbar alone add up to 747 pixels, not accounting for the additional width in padding, margin and border, bringing it up to 5 pixles on each side, or 767 pixels total for the entire space of those two dividers. Since your browser must operate in the constraints of the container, if the div does not have enough room to sit to the right, it will drop down below to the next available position. Consider reducing the width of your divs and see if that helps. Also be sure to use a tool like Firebug to experiment with your containers on-the-fly in the browser.