How to make one div higher than the other two

Question

I have this CSS code:

    #naviga {
text-align:center;
  padding-top: 20px;
}

#nav {
display:inline;
  padding-top: 0px;
  color: #fff;
  text-transform: uppercase;
  text-decoration: none;
  -webkit-box-shadow: 0 0 0 0 #ffffff;
  box-shadow: 0 0 0 0 #ffffff;
  -webkit-transition: all 250ms linear;
  -moz-transition: all 250ms linear;
  -ms-transition: all 250ms linear;
  -o-transition: all 250ms linear;
  transition: all 250ms linear;
}

#nav a {
  color: #fff;
  text-transform: uppercase;
  text-decoration: none;
  -webkit-box-shadow: 0 0 0 0 #ffffff;
  box-shadow: 0 0 0 0 #ffffff;
  -webkit-transition: all 250ms linear;
  -moz-transition: all 250ms linear;
  -ms-transition: all 250ms linear;
  -o-transition: all 250ms linear;
  transition: all 250ms linear;
  padding-bottom: 3px;
  letter-spacing: 1px;
  margin-left: 20px;

}

#nav a:hover {
  -webkit-box-shadow: #fff;
  box-shadow: 0 3px 0 0 #fff;
  opacity: 0.7;
}

#loggo {
display:inline;
  background-image: url(http://i.imgur.com/qhrrawQ.png);
height: 50px;
width: 55px;
margin-left: 20px;
}

...and this HTML code:

<div id="naviga">
<div id="nav"><a href="">uno</a> <a href="">due</a> <a href="">tre</a></div>
<div id="loggo"></div> 
<div id="nav"><a href="">quattro</a> <a href="">cinque</a> <a href="">sei</a></div> 
</div>
</div> 

This is what comes out:

And this is what I would like it to come out like:

What should I do?

Answer 1

You are using display:inline although I prefer inline-block here.

You need to set the vertical-align to middle as the default is baseline.

Note: You were using the same ID (#) more than once which is invalid. So I switched them to classes instead.

   .naviga {
     text-align: center;
     padding-top: 20px;
   }
   .nav {
     display: inline-block;
     vertical-align: middle;
     padding-top: 0px;
     color: blue;
     text-transform: uppercase;
     text-decoration: none;
   }
   .nav a {
     padding-bottom: 3px;
     letter-spacing: 1px;
     margin-left: 20px;
   }
   .loggo {
     display: inline-block;
     vertical-align: middle;
     background: red;
     height: 50px;
     width: 55px;
     margin-left: 20px;
   }

<div class="naviga">
  <div class="nav"><a href="">uno</a>  <a href="">due</a>  <a href="">tre</a>
  </div>
  <div class="loggo"></div>
  <div class="nav"><a href="">quattro</a>  <a href="">cinque</a>  <a href="">sei</a>
  </div>
</div>

Answer 2

Add vertical-align: middle to the classes

Read more about align here

Answer 3

You can't add a height to inline elements. Just change your list items to display:block; (or inline-block) and then specify a height equal to the logo height like this:

#nav a{
    display: block;
    line-height: 50px;
    float:left;
    background: none;
    margin: 0px 10px;
}

Here's a jsfiddle with above codes: http://jsfiddle.net/AndrewL32/65sf2f66/44/