css - 两栏布局，内容优先

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

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;
}