防止浮動元素的換行

Question

我試圖創建一個網站的標題左對齊，960px寬和居中的導航div和右對齊的登錄區域的標題。 這裏是我的進步

屏幕截圖的問題是，登錄休息，以新的線，我不知道如何預防。浮動元素不起作用。

這裏是一個Fiddle

但它不生產，當我在本地運行它我看到了同樣的結果。

HTML

<div id="header"><!-- Outside Container, Holds Logo and Log In --> 
     <div id="logoHolder"> 
      <p>logo</p> 
     </div> 
     <div id="navigation"> 
      <p>navigation</p> 
     </div> 
     <div id="loginHolder"> 
      <p>login</p> 
     </div> 
    </div> 

CSS

/*Header Options*/ 
#header{ 
    width:100%; 
    background-color:green; 
    height:125px; 
} 
    #logoHolder{ 
     float:left; 
    } 
    #navigation{ 

     width:960px; 
     background-color:blue; 
     margin-left:auto; 
     margin-right:auto; 
    } 

    #loginHolder{ 
     float:right; 
    } 

Answer 1

只是重新排列你的HTML以下（移動loginHolder以上navigation），它工作正常：

<div id="header"> 
    <!-- Outside Container, Holds Logo and Log In --> 
    <div id="logoHolder"> 
     <p>logo</p> 
    </div> 
    <div id="loginHolder"> 
     <p>login</p> 
    </div> 
    <div id="navigation"> 
     <p>navigation</p> 
    </div> 
</div> 

jsFiddle example

Answer 2

你必須小心寬度。導航寬度壓倒了其他div。而且，如果我沒有弄錯，div有一個內置的換行符。答案上面已經一個解決方案，我打了幾個編輯也：

/頭選項/

頭{

width:100%; 
background-color:green; 
height:125px; 

}

：您可以在這個CSS複製logoHolder {

width: 100px; 
background-color: red; 
float:left; 

}

導航{

width:344px; 
background-color:blue; 
float:left; 

}

loginHolder {

width:100px; 
background-color:yellow; 
float:left; 

}