My goal is to position 3 divs on top of each other efficiently without wasting space. The first div contains a logo image, the second is a search box, and the third, located at the right side, is a login/logout control.
I have attempted to use CSS to float the first div left, the last div right, and keep the search bar centered, but the layout doesn't look correct. Here is my HTML code:
<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 current display: