两栏布局，内容优先答案

【问题标题】：two column layout, content first两栏布局，内容优先
【发布时间】：2013-07-10 20:38:56
【问题描述】：

HTML：

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

CSS：

#content {
    background: blue;
    height: 900px;
}

#sidebar {
    float: left;
    width: 200px;
    height: 900px;
    background: red
}

JSFIDDLE：http://jsfiddle.net/aFrPc/

虽然这可行，但我希望将 #content 列在首位（而不是 #sidebar）。 div #content 必须填满所有剩余空间。

最终想要的结果图片：

【问题讨论】：

那么，你是说你想要content 在右边，而不是左边？
如果你想要右边的内容，只需将float:left;更改为float:right;
“排在第一位”到底是什么意思？如果你的意思是你想要左边的#content，你可以只写#contentfloat:left而不是#sidebar。或者，也许我不理解你的问题（工作日快结束了，我的大脑还没有达到 100% ;)）
我的意思是 div #content 在源代码中排在第一位，在它之后应该是 div #sidebar。但是在渲染布局上，div #content 应该出现在 div #sidebar 之后:)
你用的是什么浏览器？您的代码可以在最新版本的 Firefox、Chrome 和 IE 中运行（至少“它可以在我的机器上运行”）。换句话说，在我的电脑上，你的代码，侧边栏（红色）在左边，内容（蓝色）在右边，占据了所有剩余空间。

标签： css layout html multiple-columns

【解决方案1】：

UPDATED 如果他想要sidenav 文本之前的内容文本。 Fiddle

    <div id="main">
    <div id="content">
        <div style="padding-left:200px">
        Context
        </div>
    </div>        
    <div id="sidebar">sidebar</div>    
</div><!--#main-->

#content {
    background: blue;
    height: 900px;
    width:100%;
    margin-left:-200px;
    float:right;
    color:#fff;
}

#sidebar {
    float: left;
    width: 200px;
    height: 900px;
    background: red;
}

【讨论】：

这不起作用，因为#content div 应该是剩余空间的 100%
答案已更新以考虑剩余空间，使用 200 像素的左侧边栏

【解决方案2】：

试试这个。 #内容排在最前面，占200px侧边栏后剩余空间的100%：

body{
  overflow-x:hidden;
}
#content {
  background: blue;
  height: 900px;
  position:absolute;
  width:100%;
  left:200px;
}

#sidebar {
  float: left;
  width: 200px;
  height: 900px;
  background: red
}

Jsfiddle：http://jsfiddle.net/VkQ6U/

【讨论】：

@RhymeGuy，抱歉误解了这个问题。我更新了我的答案。