查看主要内容和侧边栏在一行中。浮动：权利没有按预期工作

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;设置为容器 - 这将强制它环绕所有的孩子，而不管他们的身高。您还需要设置聊天的宽度，以便有侧边栏的空间。将聊天浮动到左侧并将侧边栏浮动到右侧。