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; 
}