Html 位置：相对和浮动元素

我正在尝试设置一个简单的页面网格。每行由一个可选的左列和一个主内容右列组成。我希望右列在相同的位置保持相同的大小，即使左列不存在

我认为浮动左列并在右列上使用

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>

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

.row {
    background:#eee;
    width:90%;
    overflow:auto;
    border:1px solid #ccc;
    margin:20px auto;
}
.sidebar {
    float: left;
    width: 200px;
    border: 1px solid red;
}
.main {
    float:left
    width: 500px;
    border: 1px solid green;
    overflow:auto;
    clear:right;
}

这是一把小提琴：

令我惊讶的是，

.main

的内容似乎由于侧边栏而右移（好像

.main

有

左填充）。为什么会这样，我该如何解决

我还怀疑这不是构建网格的最佳方法，有更好的方法吗？
添加绝对位置而不是相对位置


如您所见，文本再次向左对齐

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

以下是我将如何做到这一点的要点：


我是梅因

我是一个边栏

.行{
保证金：0自动；
宽度：704px；
明确：两者皆有；
}
梅因先生{
显示：内联块；
浮动：对；
宽度：500px；
边框：1px纯绿色；
}
.侧边栏{
显示：内联块；
浮动：对；
宽度：200px；
边框：1px纯红；
}

行为700px时，此代码将居中运行
我建议执行以下操作：

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

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

.row {
    background:#eee;
    width:90%;
    overflow:auto;
    border:1px solid #ccc;
    margin:20px auto;
}
.sidebar {
    float: left;
    width: 200px;
    border: 1px solid red;
}
.main {
    float:left
    width: 500px;
    border: 1px solid green;
    overflow:auto;
    clear:right;
}

现在，您可以随时删除侧边栏，而无需添加新的CSS

演示：

或------
如果您想要该空间，即使没有侧边栏，但仍希望内容溢出：


您必须将绝对位置添加到边栏类

CSS:

相信我，通过这种方式，您可以毫无问题地添加其他行类。这是小提琴：

这不是我删除侧边栏的想法。当侧边栏不存在时，我不想让main占据侧边栏的空间。@WilfredHughes我添加了一个更新。使用浮动右键是另一个选项Position absolute在我看来不是一个布局选项。该元素后面的内容将忽略主体的高度。