DIV造型問題

Question

嗨我目前正在一個項目，有很多的DIV和部分等。 我目前遇到了我的標題問題。當我試圖最小化瀏覽器窗口時，搜索欄和窗格div會從「標題」部分往下走。

結構像this。

正如你在上面的圖片中看到的，紅色部分是標題，它裏面有3個div。 這是怎麼繼續視圖：

<div id = "header" class = "fixed-top"> 
    <div class = "wrapper"> 
     <div id = "logo"> 
     </div> 
     <div id = "search-box"> 
     </div> 
     <div id = "panes"> 
     </div> 
    </div> 
</div> 

頭的寬度爲100％，並且具有類的位置固定。 包裝類的寬度爲980像素，邊距爲0自動/自動居中。我也是絕對的。

的標誌風格是這樣的：

#logo { 
    width: 130px; 
    height: 45px; 
    float: left; 
    background:url(image.png); 
    position: relative; 
    margin: 4px 0 0 2px; 
} 

在另一方面，搜索欄是這樣的：

#search-box { 
    width: 440px; 
    padding: 2px 8px; 
    float: left; 
    position: relative; 
    margin-left: 90px; 
} 

最後，窗格的風格是：

#panes { 
    float: right; 
    width: 170px; 
    height: 48px; 
    position: relative; 
    margin-right: 10px; 
} 

順便說一下，搜索框div也有孩子div。窗格div有一個UL列表，每個LI都左移。

有什麼我錯過了爲什麼會發生這種情況？ 我也嘗試過「clearfix」，但它仍然在發生。

謝謝。

Answer 1

只是嘗試這個CSS代碼，它的工作不錯

*{ 
    margin:0; 
    padding:0; 
} 
#header{ 
    background-color:#ED1C24; 
    width:740px; 
    float:left; 
    } 
#logo { 
    width: 124px; 
    height: 45px; 
    background:url(image.png); 
    position: relative; 
    margin: 4px 0 0 2px; 
    float:left 
} 
#search-box { 
    width: 420px; 
    margin-left:20px; 
    position: relative; 
     float:left 
} 
#panes { 

    width: 160px; 
    height: 48px; 
    position: relative; 
    margin-right: 10px; 
     float:left 
} 

Answer 2

像這樣

DEMO

CSS

* { 
    margin: 0; 
    padding: 0; 
} 
#header { 
    background-color: #ED1C24; 
    display: table; 
    vertical-align: middle; 
} 
#logo { 
    width: 130px; 
    height: 45px; 
    background: url(image.png); 
    position: relative; 
    margin: 4px 0 0 2px; 
    display: table-cell; 
} 
#search-box { 
    width: 440px; 
    padding: 2px 8px; 
    position: relative; 
    margin-left: 90px; 
    display: table-cell; 
} 
#panes { 
    width: 170px; 
    height: 48px; 
    position: relative; 
    margin-right: 10px; 
    display: table-cell; 
}