CSS: all sub-div elements on one line with centerder 2nd element - css

Question

i am attempting to align 3 sub-div elements in one line, first element with left floating, third - with right and 2nd - centered.
Below my draft. What I have missed?
http://jsfiddle.net/yDzL9/
In my real e-shop the problem is in aligning of 2nd div which contains input (button), but in jsfiddle's example the problem with the third div.

Answer 1

Use display: inline-block for all sub elements and set white-space: nowrap; property to parent div.
Example-
HTML:
<div id="container">
<div class="wishlist">
</div>
<div class="cart">
</div>
<div class="compare">
</div>
</div>
Method 1 (Without Floated div):
CSS:
#container {
height:26px;
width:300px;
background-color:#009900;
white-space: nowrap;
}
#container div{
display: inline-block;
width:100px;
height:26px;
}
Working Example
Method 2 (With Floated div)
CSS:
#container {
height:26px;
width:300px;
background-color:#009900;
white-space: nowrap;
text-align: center;
}
#container div{
display: inline-block;
width:50px;
height:26px;
}
.wishlist{
background-color:blue;
float: left;
}
.cart{
background-color:black;
}
.compare{
background-color:red;
float: right;
}
Working Example

Answer 2

Using the display: flex css rule it will work as you want it to!
HTML:
<div id="container">
<div class="wishlist"></div>
<div class="cart"></div>
<div class="compare"></div>
</div>
CSS:
body {
margin: 0;
padding: 0;
}
#container {
height:26px;
width:300px;
padding: 10px;
display: flex;
background-color:green;
}
#container > div {
height: 90%;
width: 90px;
}
.wishlist {
float: left;
background-color:blue;
}
.cart {
margin: 0 auto;
background-color:yellow;
}
.compare {
float: right;
background-color:red;
}
As shown in this jsfiddle, and here is another one.