css 2列布局

我有一个基本的两列CSS布局，CSS看起来像

#sidebar {
    width:100px;
}
#main {
    margin-left:100px;
}

还有一些示例html

<div id="content">
  <div id="sidebar">some sidebar content</div>
  <div id="main">some main content</div>
</div>

一些边栏内容
一些主要内容

这是可行的，但边栏宽度需要与main的左边距值相匹配，这似乎是重复的，而且容易出错。有更好的方法吗？

CSS

#sidebar { width:100px; float: left; }
#main { float: right; }

HTML

<div id="content">
    <div id="sidebar">my stuff</div>
    <div id="main">some main content</div>
    <div style="clear:both;"></div>
</div>

我的东西
一些主要内容

---

我推荐或用于基本html/css样式。

您可以使用

侧栏上的
float
属性：

#sidebar {
    width:100px;
    float: left;
}



但是，使用上述方法，如果
#main
的内容导致其高度延伸到
#边栏
下方，则。要避免这种情况，请使用
display:table单元格
属性：

#sidebar, #main {
    display: table-cell;
}

您可以将
侧栏
嵌套在
main
中，在
main
中留下一个空格和
侧栏
一个空白

#content{
    width: 100%;
}
#sidebar, #main{
    float: left;
    display: block;
}
#sidebar{
    width: 100px;
    background-color: orange;
    margin-left: -100px;
}
#main{
    padding-left: 100px;
    background-color: green;
    width: 100%;
}

<div id="content">
    <div id="main">
        <div id="sidebar">some sidebar content</div>some main content
    </div>
</div>

#内容{
宽度：100%；
}
#侧栏，#主{
浮动：左；
显示：块；
}
#边栏{
宽度：100px；
背景颜色：橙色；
左边距：-100px；
}
#主要{
左侧填充：100px；
背景颜色：绿色；
宽度：100%；
}
一些侧边栏内容一些主要内容

是工作演示。
哦-没错。只是“浮动：对；”J4I：也许你应该看看960gs（）或BlueprintCSS（）。谢谢。它看起来像是使用@JSW189建议的display:table-cell，正如我所期望的那样——无论如何，您应该看看前面提到的css框架。它们易于使用和理解。如果主要内容比侧边栏内容和包装长，包装似乎会在侧边栏下结束…@JeffStorey。尝试将
display:table cell
添加到
#sidebar
和
#main
：