Top, center align 3 divs on my master page

Question

I'm simply trying to make 3 divs sit on top without too much space being wasted. One div is simply a logo image, another a search box, and finally the last at the right div is simply a login / logout control.

My css is very poor, and I've tried floating the first div left and the right most div right and keeping the search bar in the middle but it doesn't look right. Here is my html:

<div id="main">
        <div id="maia-header-logo" class="float-left;">
        </div>
        <div id="searchbox">
                <input runat="server" id="search" type="text" placeholder="Type here..." />
                <input runat="server" id="submit" type="submit" value="Search" />
        </div>
        <div class="float-right">
                <section id="login">
                    <asp:LoginView ID="LoginView1" runat="server" ViewStateMode="Disabled">
                        <LoggedInTemplate>
                            <p>
                                Hello, <a id="hlManageAccount" runat="server" class="username" href="#" title="Manage your account">
                                    <asp:LoginName ID="LoginName1" runat="server" CssClass="username" /></a> | <asp:LoginStatus ID="LoginStatus1" runat="server" LogoutAction="Redirect" LogoutText="Log off" LogoutPageUrl="~/" />
                            </p>
                        </LoggedInTemplate>
                    </asp:LoginView>
                </section>
         </div>
    </div>    

The result:

Answer 1

If you define your widths, they should all sit at the top.

Otherwise you can create a fixed width container, set it as position: relative; then position your top bar with relative positioning,

#header-container {
    position:relative;
    width: 1000px;
    margin: auto; }
#maia-header-logo {
    position: relative;
    top: 0;
    left: 0; }
#searchbox { 
    width: 500px; /* exact width of element */
    position: relative;
    top: 0;
    left: 250px; /* (containerWidth - elementWidth) / 2 */ }
#login {
    width: 250px;
    text-align: right;
    left: 750px; }

Since I don't have the exact measurements for your site, I can't do the math for you, but the equation is simple enough.