css - 2 列のレイアウト、コンテンツが最初

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

更新済み sidenav テキストの前にコンテンツ テキストが必要な場合。 フィドル

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

Answer 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/