html - 位置 : relative and floating elements

Question

我正在尝试设置一个简单的页面网格。每行都包含一个可选的左列，以及一个主要内容右列。我希望右列在相同位置保持相同大小，即使左列不存在也是如此。

我认为 float 左列并在右列上使用 position:relative 和 left: 会给我想要的行为。

我的 HTML 看起来像这样:

<div class="row">
    <div class="sidebar">I'm a sidebar!</div>
    <div class="main">
        <p>I'm main!</p>
    </div>
</div>

我的 CSS 看起来像这样:

.sidebar {
    float: left;
    width: 200px;
    border: 1px solid red;
}
.main {
    position: relative;
    left: 220px;
    width: 500px;
    border: 1px solid green;
}

这是一个 fiddle :http://jsfiddle.net/ttr5k/1/

令我惊讶的是，.main 的内容向右移动(好像 .main 有 padding-left)似乎是由于边栏。这是为什么，我该如何解决？

我还怀疑这不是构建网格的最佳方法，是否有更好的方法？

Answer 1

添加绝对位置而不是相对位置

http://jsfiddle.net/ttr5k/2/

如你所见，文本再次左对齐

.sidebar {
float: left;
width: 200px;
border: 1px solid red;
}
.main {
position: absolute;
left: 220px;
width: 500px;
border: 1px solid green;
}