DIV styling problems - css

Question

Hi I am currently working on a project that has lots of DIVs and sections and such.
I am currently having problems with my header. The search bar and the panes div are going down or going out from the "header" section when I'm trying to minimize the browser window.
Structure goes like this.
As you can see on the image above, the red part is the header and it has 3 divs inside it.
This is how it goes on the view:
<div id = "header" class = "fixed-top">
<div class = "wrapper">
<div id = "logo">
</div>
<div id = "search-box">
</div>
<div id = "panes">
</div>
</div>
</div>
The header's width is 100% and having a class of position-fixed.
The wrapper class has a width of 980px and margin is 0 auto/auto centre. I also made its position to absolute.
The logo style looks like this:
#logo {
width: 130px;
height: 45px;
float: left;
background:url(image.png);
position: relative;
margin: 4px 0 0 2px;
}
The search bar on the other hand looks like this:
#search-box {
width: 440px;
padding: 2px 8px;
float: left;
position: relative;
margin-left: 90px;
}
Lastly, the panes style is:
#panes {
float: right;
width: 170px;
height: 48px;
position: relative;
margin-right: 10px;
}
And by the way, the search-box div also have child divs. And panes div has a UL list and each LIs are floated left.
Is there anything I am missing out why this happens?
I also tried the "clearfix" but it is still happening.
Thanks.

Answer 1

Just Try This CSS code, it will work nice
*{
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

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