Cannot align inline-block image and nav buttons - html

Question

For some reason or another my navigation buttons are being pushed down by the image. I can solve the issue by floating the image but that does not interest me.
CSS:
.wrapped {
position: relative;
width: 70%;
margin: 0 auto;
}
.header {
width: 70%;
margin: 0 auto;
}
.headernav {
width: 70%;
margin: 0 auto;
height: 120px;
}
.logo, .logo img {
display: inline-block;
margin-right: 30px;
}
.nav {
padding-left: 30px;
display: inline-block;
height: 120px;
line-height: 120px;
vertical-align: middle;
}
.navbutton {
padding: 5px 30px;
display: inline-block;
}
#fitness, #wcontrol, #recipes, #supplementation {
text-align: center;
height: 36px;
line-height: 36px;
font-weight: bold;
}
HTML:
<div id="wrapperheader">
<div class="headernav">
<div class="logo"><img src="http://protein.guru/images/PGlogo.png" alt="Protein.guru Logo" class="logo"></div>
<div class="nav">
<div class="navbutton"><div id="recipes">Recipes</div></div>
<div class="navbutton"><div id="fitness">Fitness</div></div>
<div class="navbutton"><div id="wcontrol">Weight Control</div></div>
<div class="navbutton"><div id="supplementation">Supplementation</div></div>
</div>
</div>
</div>
If anyone knows why this is happening or of a simple solution, please let me know. Sorry if its an obvious answer.. I'm been staring at the code on and off for a day and it's just not clicking.

Answer 1

You could simplify your HTML & CSS to remove div soup, by moving the logo into the nav bar:
Usually the logo would be wrapped with an anchor tag, so that clicking on it will return the user to the home page. So it becomes a nav element.
HTML:
<div class="nav">
<div class="navlogo"><img src="http://protein.guru/images/PGlogo.png" alt="Protein.guru Logo" class="logo"></div>
<div class="navbutton"><span id="recipes">Recipes</span></div>
<div class="navbutton"><span id="fitness">Fitness</span></div>
<div class="navbutton"><span id="wcontrol">Weight Control</span></div>
<div class="navbutton"><span id="supplementation">Supplementation</span></div>
</div>
The HTML above uses spans, but you can also use <... class="navbutton" id="recipes">Recipes</...>, as shown below.
Optimized HTML: Generally people create UL LI tag stacks for nav bars.
<ul class="nav">
<li class="navlogo"><img src="http://protein.guru/images/PGlogo.png" alt="Protein.guru Logo" class="logo"></li>
<li class="navbutton" id="recipes">Recipes</li>
<li class="navbutton" id="fitness">Fitness</li>
<li class="navbutton" id="wcontrol">Weight Control</li>
<li class="navbutton" id="supplementation">Supplementation</li>
</ul>
Then cleaning up the CSS, will remove problems with applying duplicate right margins & paddings to both the .logo & .logo .img tags. In your example, there is also a left margin on the nav element, which was creating extra margin space between the logo & the 1st link.
In this CSS example below, I've also thrown in a vertical-align:middle; property, so that the nav links center vertically next to a larger image logo. See this jsfiddle.
CSS:
.nav {
height: 120px;
line-height: 120px;
margin: 0 auto;
vertical-align: middle;
width: 70%;
}
.nav li {
display: inline-block;
list-style-type: none; /* removes bullets */
}
.nav .logo,
.nav .navlogo,
.nav .navbutton {
display: inline-block;
}
.nav .logo {
vertical-align: middle;
}
.nav .navbutton {
font-weight: bold;
height: 36px;
line-height: 36px;
padding: 5px 0 0 30px;
text-align: center;
}

Answer 2

If you wants to keep width: 70% of your .wrapped container, you have to reduce padding of your nav menu and size of your image.
See this fiddle
(It works on large size of the window)
Otherelse, you can put a fixed width of the .wrapped container but still have to consider padding of your nav menu and width of the image to make it fits.
.navbutton {
padding: 5px 25px;
display: inline-block;
}