查看主要內容和側邊欄在一行中。浮動：權利沒有按預期工作

Question

我想查看主要內容和側邊欄在一行。 很簡單，我想，只需添加一個float：right;但事實證明這並不容易。

你可以找到一個準備jsfiddle這裏：http://jsfiddle.net/W3MKx/

側邊欄（與輸入框的東西）應該不斷地爲200px寬。

Answer 1

如果使用floatting方法，除了應先在流量： http://jsfiddle.net/W3MKx/1/

<div id="all"> 
    <aside id="ball"> 
     <form> 
      <input type="text" id="ueoa" autocomplete="off" placeholder="Search user" /> 
      <ul id="caoeu"></ul> 
     </form> 
    </aside> 
    <article id="chat"> 
     <div id="chat-header"> <span class='label'>Site</span> 
<span id="iiae"></span> 

      <button class="btn" id="nht"> 
       <img src="img/icon/htino.png" />View</button> 
     </div> 
     <div id="chat-entries"></div> 
    </article> 
</div> 

Answer 2

我建議做以下幾點：（working jsFiddle）

不改變適用你的HTML結構以下CSS：

#all { 
    background: blue; 
    overflow:hidden; /* This is mandatory to make the parent wrap around the children */ 
} 

#ball { 
    background: red; 
    float: right; /* float sidebar to the right */ 
    width:200px; /* constant width as you requested */ 
} 

#chat{ 
    width:calc(100% - 210px); /* You can set the width in any way you choose - just make sure to leave room for the sidebar */ 
    float:left; /* float the chat to the left */ 
} 

當使用浮動元素時，最好將overflow:hidden;設置爲容器 - 這將強制它環繞所有的孩子，而不管他們的身高。您還需要設置聊天的寬度，以便有側邊欄的空間。將聊天浮動到左側並將側邊欄浮動到右側。