Css 两列等高布局-列之间的空间

我发现一些代码创建了完美的带有页眉和页脚的两列布局。无论内容如何，这两列完全向下和向右延伸，这正是我所寻找的

问题是：我找不到在两列之间创建空间的方法。我需要空间，因为我使用的是边框，看起来很拥挤。列不浮动，边距也不起作用

有人能想出一种在不破坏功能的情况下将两者分开的方法吗

以下是JSFIDLE链接：

非常感谢

代码如下：

<div id="wrapper">
<div id="header">
</div>

<div id="main">

<div id="side">
<div id="side-stuff">
<ul>
<li><a href="../English/index.html">Home</a></li>
</ul>
</div>
</div>

<div id="content">
<p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has</p>
</div>
</div>

<div id="footer">&copy; 2013 </div>
</div>

---

因为您使用的是

display:table单元格

，所以边距不起作用

这里有一个解决办法。按如下所示创建分隔符，并在

#side

和

#content

之间插入：

<hr class="spacer"> 

将宽度设置为合适的值

小提琴：

这引入了一个额外的元素，但它易于实现和可靠

---

请注意，

表格单元格

在IE7及更早版本中不受支持。对于某些人来说，这是一个问题。

因为您使用的是

显示：表格单元格

，所以边距不起作用

这里有一个解决办法。按如下所示创建分隔符，并在

#side

和

#content

之间插入：

<hr class="spacer"> 

将宽度设置为合适的值

小提琴：

这引入了一个额外的元素，但它易于实现和可靠

---

请注意，

表格单元格

在IE7及更早版本中不受支持。对于某些人来说，这是一个问题。

因为元素现在实际上是一个表，所以可以使用应用于表的所有属性。您要查找的是

边框间距

属性，它适用于表元素

---

您需要对周围元素的边距进行一些修补，以使

#main

元素回到它应该位于的位置。

因为您的元素现在实际上是一个表，所以您可以使用应用于表的所有属性。您要查找的是

边框间距

属性，它适用于表元素

---

您需要对周围元素的边距进行一些修补，以使您的

#main

元素回到它应该位于的位置。

这很有趣；我刚看到一篇关于边界间距的文章，但将其应用到了错误的分区。现在，我将其应用到了#main，它正是我希望它做的-非常感谢您的快速响应！这很有趣；我刚看到一篇关于边界间距的文章，但将其应用到了错误的分区。现在，我将其应用到了#main，它正是我希望它做的-非常感谢您的快速响应！

hr.spacer {
    display: table-cell;
    border: 1px;
    width: 10px;
}

#main {
    border-spacing: 10px;
}