Css html文档中固定流体固定标题的问题

我试图在我的网站上的页面顶部创建一个标题栏，但我的布局有问题。下面是我想要的结果：

---

以下是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>

---

我知道这可能不是最有效的代码。我真正的问题在于，在user_search div中，当在顶部添加2填充时，通过鼠标单击，搜索框变得不可用。如果有人能帮我指出正确的方向或向我展示更好的方法，我将不胜感激。

首先，从“用户搜索”中删除“padding top”值，使用以下CSS：

#user_search {
    float: left;
    height: 30px;
    width: 180px;
    margin-left: -181px;
    border: 1px solid #D8D8D8;
}

其次，在“#搜索框”中添加一个“margin top”值，这样就可以了

#search_box {
    height: 26px;
    width: 176px;
    margin: 5px 0 0 0;
}

---

演示：

谢谢！这是一个快速而简单的解决方法：）

#search_box {
    height: 26px;
    width: 176px;
    margin: 5px 0 0 0;
}