2

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; } 
1
  • Put the right logo before the title.
    – Itay
    Aug 18, 2013 at 10:08

3 Answers 3

0

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>
0

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>
0

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.