Trouble with a fixed-fluid-fixed header in html document - css

Question

I'm trying to create a header bar at the top of a page on my website and I'm having trouble with the layout. Below is my desired result:
goal http://ambiguities.ca/images/goal.png
Here is the html:
<div id="page_wrapper">
<div id="header_wrapper">
<div id="banner_wrapper">
<div id="header_banner">
<div class="header_format">Site Name</div>
</div>
</div>
<div id="user_management">
<div class="header_format">Login / Register</div>
</div>
<div id="user_search">
<form method="post" action="?search">
<input id="search_box" type="search" name="search" autocomplete="off" placeholder="Search..." />
</form>
</div>
</div>
</div>
and the css:
body{
margin:0;
padding:0;
}
#page_wrapper {
width: 100%;
min-width: 800px;
}
#header_wrapper {
width: 100%;
height: 30px;
background-color: #E6E6E6;
border-bottom-color: #D8D8D8;
border-bottom-style: solid;
border-bottom-width: 1px;
}
#banner_wrapper {
float: left;
width: 100%;
}
#header_banner {
margin: 0 180px 0 160px;
}
#user_management{
float: left;
height: 30px;
width: 160px;
margin-left: -100%;
border-right-color: #D8D8D8;
border-right-style: solid;
border-right-width: 1px;
}
#user_search {
padding-top: 2px;
float: left;
height: 30px;
width: 180px;
margin-left: -181px;
border-left-color: #D8D8D8;
border-left-style: solid;
border-left-width: 1px;
}
#search_box {
height: 26px;
width: 176px;
margin: 0;
}
.header_format {
font-family: Verdana;
font-size: 10px;
text-align: center;
line-height: 30px;
vertical-align: middle;
}
I understand that this might not be the most efficient code. My real problem lies in the fact that in the user_search div when a padding of 2 at the top is added the search box becomes unusable by mouse click. If anyone can help me by pointing me in the right direction or showing me a better way of doing this it would be much appreciated.

Answer 1

First, remove the 'padding-top' value from '#user_search', use the following CSS:
#user_search {
float: left;
height: 30px;
width: 180px;
margin-left: -181px;
border: 1px solid #D8D8D8;
}
Second, add a 'margin-top' value to '#search_box' and that should do the trick.
#search_box {
height: 26px;
width: 176px;
margin: 5px 0 0 0;
}
Demo: http://jsfiddle.net/8Frnq/