两栏布局，内容第一

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＃内容必须填满所有剩余空间。最终通缉的结果的

图片：

Answer 1

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

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/