Howto CSS: two elements, both vertically centered, floating to opposite sides (Example) - html

Question

To Put it simple, I would like a header with two elements floating to each side and vertically centered:
I started out with doing this with non-floating elements and managed to make this example.
But once I add the float:left or float:right the vertical centering is lost (I understand why, because it's not part of the flow anymore)
I wonder what is the best method to achieve this. Complete CSS redesign is happily accepted.
Thanks in Advance!

Answer 1

Vertical centering can be painful, especially when you are not dealing with inline elements. In this case, I would recommend taking advantage of display:table-cell.
HTML
<div id="wrapper">
<div class="cell">
<div class="content">
Content Goes here
</div>
</div>
<div class="cell">
<div class="content2">
<div class="redbox">
</div>
</div>
</div>
</div>
CSS
#wrapper {
color: white;
display: table;
border: 1px solid darkblue;
background: blue;
width: 100%;
}
.cell {
display: table-cell;
vertical-align: middle;
height: 200px;
}
.content {
float: left;
}
.content2{
float: right;
}
.redbox {
border: 2px solid darkred;
background: red;
height: 75px;
width: 75px;
}
Example: http://jsfiddle.net/YBAfF/

Answer 2

Add text-align:right to parent div, it makes child elements to align right side. Now add float:left to #text
#parent {
border: 1px solid black;
display: block;
line-height: 400px;
height: 400px; text-align:right
}
#text {
display: inline-block;
border: 1px dashed black;
height: 100%; text-align:left; float:left
}
#logo {
border: 1px dashed black;
height: 90%;
line-height: 90%;
vertical-align: middle;
display: inline-block;
}
#logo img {
border: 1px dashed red;
height: 100%;
}
​
DEMO

Answer 3

Here's a sample jsfiddle and the same code below. When you set the height of an element, you can set the same line-height to nested elements and they'll expand to the height. Vertically centering the content.
HTML
<div id="wrapper">
<div id="left">left</div>
<div id="right">right</div>
</div>​
CSS
#wrapper{
margin:0 auto;
width 960px;
background: #eee;
height:50px;
}
#left{
float:left;
background:#ccc;
line-height:50px;
}
#right{
float:right;
background:#ddd;
line-height:50px;
}
​

Answer 4

You should add a wrapper around the elements you want to center and float them inside the wrapper. Something like that:
HTML
<div class="center">
<p class="left">Some text goes here</p>
<img src="/path/toimage" alt="My image" class="right">
</div>
CSS
.center {
margin:0 auto;
width: 400px;
}
.right {
float: right;
}
.right {
float: left;
}
Of course, this is a very simple example. You can change the values and CSS according to your needs.