using css to center an element - css

Question

I am trying to align the elements in the head portion of a webpage properly.
There are three elements placed inside a header div:
The site logo (as an image) wrapped in an anchor tag should be left justified.
A div that contains a bunch of vertically aligned menu elements right justified.
A form containing a search box and a go button. This must be centered horizontally in the page and show between to logo on the left and the menu items on the right.
All three elements should be justified to the bottom of the header div.
I have been wrestling with this but nothing seems to work. Can you please help? Thanks!

Answer 1

<div style="float: right;">
<ul>
<li>Menu item</li>
</ul>
</div>
<div style="float: left;">
<img style="border: 0;" src="something.png" />
</div>
<div style="width: 300px; margin: 0 auto;">
Search box
</div>
Just a quick mockup.

Answer 2

UPDATE: using table/table-cell trick to allow vertical-align: bottom;
You need to wrap your manu, logo and searchbox into <div> with display: table-cell; css rule.
The markup:
<div class="table header">
<div class="table-cell">
<div class="logo"> </div>
</div>
<div class="table-cell">
<div class="searchbox"> </div>
</div>
<div class="table-cell">
<div class="menu"> <br/><br/><br/><br/><br/><br/><br/><br/></div>
</div>
</div>
and css:
.table {
display: table; /* our outer contaner should behave like table; */
width: 100%; /* set width to 100% */
}
.table-cell {
display: table-cell; /* our internal wrapper should behave like table cell to allow vertical-align */
vertical-align: bottom; /* align all elements vertical */
background: yellow; /* for debug purposes */
}
.logo {
float: left;
width: 100px;
background: green;
}
.menu {
float: right;
width: 100px;
background: red;
}
.searchbox {
margin: 0 auto;
width: 100px;
background: blue;
}
Complete example: http://jsfiddle.net/EREmH/4/