两列布局，内容第一

Question

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必须填充所有剩余空间。

最终想要结果的图像：

Answer 1

试试这个。首先列出#Content，并在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/

Answer 2

更新如果他想要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;
}