html - "infamous"CSS : 2 divs side-by-side, 跨浏览器版本(？)

Question

我的 problem design is seen here (使用浏览器而不是 IE)。并在浏览器 IE 中观察目标设计。它是一个由 4 个 div 组成的基本设计:一个父容器 div、一个“左”div、一个“右”div(内容:图像和一些文本)和一个“底部”div(自然是在顶部下方)两个 div)。

明显的问题是“正确的”div 没有正确定位!它应该漂浮在“左”div 的右侧。当然，我只使用 CSS 设计布局，并在假设代码不需要任何跨浏览器调整的情况下发布它。

所以最重要的问题是……“这段代码中缺少什么？”

<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>

以及相关的 CSS: body { margin :0； 填充:0； 文本对齐:居中；

#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

一切都太宽了。它全部打包到一个宽度为 762 像素的容器中，而仅您的 #leftbar 和 #centralbar 加起来高达 747 像素，不考虑填充、边距的额外宽度和边框，使其每侧最多 5 个像素，或者这两个分隔线的整个空间总共 767 个像素。由于您的浏览器必须在容器的约束下运行，如果 div 没有足够的空间位于右侧，它会下降到下一个可用位置。 考虑减少 div 的宽度，看看是否有帮助。另外一定要使用像 Firebug 这样的工具。在浏览器中即时试验您的容器。