从 XHTML 1 到 HTML5 的模板转换，CSS 错误

Question

这是一个简单的 3 栏模板，左侧和右侧有边栏，中间有内容。我无法理解列之间的间距，内容 (post) 列和右侧栏之间的 space 太多了。

[side-bar] [content/ post / matter]_____space/gap___[side-bar]

我无法reduce/remove“_space/gap”使模板看起来像

[side-bar] [content/ post / matter] [side-bar]

在 post 在此之前，我已经尝试 chrome-developer 工具来了解和重构它，但我一直无法理解它。

JSFiddle Example

Answer 1

更改代码的这一部分：

#right {
float: right;
width: 180px;
padding: 10px 30px 10px 0;
}

对此：

#right {
float: left;
width: 180px;
margin-left: 10px;
padding: 10px 30px 10px 0;
}

向右浮动会将容器保持在它在自己的容器中可以到达的最右边的位置。