兩欄佈局，內容第一

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/