Need help on css header float - html

Question

When i do my web design, meet a problem when i need to do
[LEFT LOGO] then [TITLE(CENTER)] then [RIGHT LOGO]
The problem appear at RIGHT LOGO there, it doesn't align with LEFT LOGO.
The right logo is under the line of TITLE(CENTER)
here is my code sample, thanks:
<div class="navigation">
<div id="left">
<a title="Multimedia" href="#">
<img src="images/logo.png"/>
</a>
</div>
<div id="title">Tutor Program</div>
<div id="right">
<a href="#" title="Inspire and Innovate">
<img src="images/tagline_alt.png"/>
</a>
</div>
css:
.navigation{
height:auto;
background-color:#666;
width:85%;
margin:auto;
min-width:800px;
}
#title{
text-align:center;
margin: auto;
font-family:‘Arial Black’, Gadget, sans-serif;
font-size: 20px;
color: #FFF;
}
#left {
float: left;text-align:left;
margin: auto;
}
#right {
float: right;text-align:right;
margin: auto;
}
a img { border: 0; }

Answer 1

simply move the right container above the left container check below
<div class="navigation">
<div id="right">
<a href="#" title="Inspire and Innovate">
<img src="images/tagline_alt.png"/>
</a>
</div>
<div id="left">
<a title="Multimedia" href="#">
<img src="images/logo.png"/>
</a>
</div>
<div id="title">Tutor Program</div>
</div>

Answer 2

I thing its work an another way i have some changes in style width depends of logo width. if it is not set in center then change the width %.
#title{
text-align:center;
margin: auto;
font-family:'Arial Black', Gadget, sans-serif;
font-size: 20px;
color: #FFF;
width:59%;
float:left;
}
.clear {
clear:both;
margin:0px;
font-size:0px;
}
and add a div after the last div with class clear.
<div id="right"> .... </div>
<div class="clear"> </div>

Answer 3

You could also display your divs as a table and table-cells, like this:
HTML
<div class="navigation">
<div id="left">
left
</div>
<div id="title">
title
</div>
<div id="right">
right
</div>
</div>
CSS
.navigation {
width: 100%;
display: table;
table-layout: fixed;
}
.navigation > div {
display: table-cell;
}
.navigation div:nth-child(1) {
background: lightgray;
}
.navigation div:nth-child(2) {
background: gray;
text-align: center;
}
.navigation div:nth-child(3) {
background: lightgray;
text-align: right;
}
Also check the JSFiddle Demo