While working on my web design project, I encountered an issue when trying to align the [LEFT LOGO], [TITLE (CENTER)], and [RIGHT LOGO] elements.
The problem occurred with the RIGHT LOGO, as it was not aligning properly with the LEFT LOGO. Instead, the right logo was positioned below the line of the TITLE (CENTER).
Below is a snippet of my code:
<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; }