Html DIV仅两列CSS布局

我正在重新设计一个布局，目前使用表进行两列设计，遇到了一些问题

<div id="frame">

 <div id="leftcol">
  <div id="1">blah</div>
 </div>

 <div id="leftcol">
  <div id="2">blah</div>
  <div id="3">blah</div>
 </div>

</div>

#leftCol
{
 margin-right: 10px;
 width: 49%;
 float: left;
}

#rightCol
{ 
 width: 49%;
 float: left;
}

废话
废话
废话
#左撇子
{
右边距：10px；
宽度：49%；
浮动：左；
}
#rightCol
{ 
宽度：49%；
浮动：左；
}

最初我有一个两列的表格，宽度为100%——这在Firefox中非常有效，但在IE中，表格溢出了

#frame

div容器。我删除了这个表，并添加了两个浮动div，但在使列相等方面仍然存在问题

我的所有内容都位于div

#frame

，它有高度限制、填充和边距（我用它在页面边缘留下一个“边沟”）

我需要两个浮动DIV列具有相同的宽度，并且彼此相邻，中间有一个10px（ish）的边沟。我尝试将两个

宽度都设置为50%

，但这失败了，因为它们所在的容器（

#frame

）的宽度小于整个页面的宽度。（如果我去掉排水沟填充物，它在FF中有效，但在IE中仍然无效

使每列的宽度为49%是可行的，但由于浏览器之间的大小变化，并且右列与

#frame

容器的边缘不对齐，因此看起来很难看

---

我以前尝试过这样做，但最终还是回到了表9（因为它似乎可以工作），但现在我发现它与IE不兼容，我已经花了几个小时寻找跨浏览器css解决方案。有什么想法吗？

我想你可能会从960gs或blueprint css这样的css框架中受益，它允许绝对的网格布局，并且是跨浏览器兼容的开箱即用

---

如果您确保每列没有任何边距或填充物，那么将每列设置为50%应该有效

如果它们需要填充，则添加一个额外的包装器div，该div可以具有所需的填充/边距

对于中间的边沟，可以在左/右侧为这些包装div设置一个边框，使其看起来像列之间的一个空格

---

发布完整的代码示例（例如在jsbin.com上）也可以帮助我们更容易地理解您的问题。：）

如果您知道框架的宽度，您可以

#帧{
背景颜色：绿色；
宽度：500px；
溢出：自动；
}
#左撇子
{
宽度：245px；
浮动：左；
背景色：红色；
}
#rightCol
{
宽度：245px；
浮动：对；
背景颜色：蓝色；
}
废话
废话
废话

否则，添加一个额外的div，并且

废话
废话
废话
#框架{
背景颜色：绿色；
宽度：500px；
溢出：自动；
}
#左撇子
{
宽度：50%；
浮动：左；
}
#砍{
右边距：10px；
背景色：红色；
}
#rightCol
{
宽度：50%；
浮动：对；
背景颜色：蓝色；
}

好的，给你。这就是实现这一目标的方式

CSS

HTML

---

请注意，当两个div都被称为

#leftCol

时，HTML中有输入错误。没有

#rightCol

您知道边框的宽度吗？我不知道#边框的宽度，它根据屏幕尺寸而变化。我尝试了你的第二种解决方案，但对边距的破解仍然会导致浮动堆叠在彼此的顶部。嗯？你点击链接了吗？它们不堆叠在FF或IE中。确定您实现了它吗？

#frame {
    background-color: green;
    width: 500px;
    overflow: auto;
}

#leftCol
{
    width: 245px;
    float: left;
    background-color: red;
}

#rightCol
{
    width: 245px;
    float: right;
    background-color: blue;
}

<div id="frame">

    <div id="leftCol">
    <div id="1">blah</div>
    </div>

    <div id="rightCol">
    <div id="2">blah</div>
    <div id="3">blah</div>
    </div>

</div>

<div id="frame">

    <div id="leftCol">
    <div id="hack">
        <div id="1">blah</div>
    </div>
    </div>

    <div id="rightCol">
    <div id="2">blah</div>
    <div id="3">blah</div>
    </div>

</div>

#frame {
    background-color: green;
    width: 500px;
    overflow: auto;
}

#leftCol
{
    width: 50%;
    float: left;
}

#hack {
    margin-right: 10px;
    background-color: red;
}

#rightCol
{
    width: 50%;
    float: right;
    background-color: blue;
}

#leftCol, #rightCol{
    width: 48%;
    float: left;
    background: red;
    box-sizing: border-box;
}

#leftCol{
    margin-right: 1%; 
}

#rightCol{ 
    margin-left: 1%; 
}

<div id="frame">

    <div id="leftcol">
      <div id="1">blah</div>
     </div>

     <div id="rightCol">
      <div id="2">blah</div>
      <div id="3">blah</div>
     </div>

</div>

    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box;