Putting three divs on a single line - html

Question

I have three divs that I am trying to put on a single line. I want one to always snap left, and I want one to always snap right. The third one, which the display will be toggled using javascript, has to always be center. I've tried float. I've tried display:inline-block. Nothing works. Below is my code, any help would be greatly appreciated.
<div id="header" class="AppBackColor" style="color:#FFFFFF; padding:2px; width:100%; height:34px;">
<div style="height:100%;display:inline-block;float:left;">
<img src="Images/Logo/uss_logo_white.gif" height="30px" width="31px" alt="USS" />
<label>Change Control</label>
</div>
<div id="TimeoutWarning" style="height:100%; width:450px;display:inline-block;margin:0 auto;">Your session will expire in <label id="lblSessionCountDown">5:00</label>. Click <a style="color: Red;" href="#" onclick="ResetSession();void(0);">OK</a> to continue your session.</div>
<div style="height:100%;display:inline-block;float:right;">
<label>User:</label>
<asp:Label ID="lblUser" runat="server"></asp:Label>
<asp:ImageButton ID="btnLogout" runat="server" BorderStyle="None" ImageUrl="~/Images/Logout-icon.png" onclick="btnLogout_Click" Height="30px" Width="30px"/>
</div>

Answer 1

You can use absolute positioning like this:
.container {
position: relative;
width: 100%;
height: 50px;
}
.first {
width: 100px;
height: inherit;
position: absolute;
left: 0;
background-color: #FAA;
}
.second {
width: auto;
height: inherit;
position: absolute;
top: 0;
margin-left: 100px; // 1st div width
margin-right: 200px; // 3rd div width
background-color: #AFA;
}
.third {
width: 200px;
height: inherit;
position: absolute;
right: 0;
top: 0;
background-color: #AAF;
}
And then use a <div class="container"> which has inside the 3 divs with classes first, second and third.
If you set the margins of the second equals to the with of the first and third, like in the sample, it will fill up all the space.
You can look at it working in this fiddle: http://jsfiddle.net/jbustos/Bq2rw/

Answer 2

Here's an example of one way to do it. The order of the divs in the HTML being left, right, center is important, since otherwise the right will place itself below the left and center elements. See it live at jsfiddle (with JS to hide/show the center). Here's the HTML:
<div class="left">left text</div>
<div class="right">right</div>
<div class="center">center</div>
And CSS:
.left, .center, .right {
background-color: red;
width: 100px;
}
.left {
float: left;
}
.center {
margin: auto;
}
.right {
float: right;
}