Question

HTML:

<div id="header">
    <div id="logo" class="block"><h1>Logo place</h1></div>
    <div id="navigation" class="block">
        <ul>
            <li><a href="index.html" class="current"><span class="meta">Homepage</span><br />Home</a></li>
            <li><a href="about.html"><span class="meta">Who are we?</span><br />About</a></li>
            <li><a href="contact.html"><span class="meta">Get in touch</span><br />Contact Us</a></li>
        </ul>
    </div>
</div>

CSS:

#header .block{
    padding: 5px;
    display: inline-block;
    vertical-align: top;
}

#header #logo{
    float: left;
    vertical-align: middle;
}

#header #navigation{
    float: right;
    vertical-align: top;
}

#navigation li{
    display: inline-block;
}
#navigation li a {
    font-family:arial,sans-serif !important;
    display:block;
    padding:44px 0 0;
    text-decoration:none;
    color:#000000;
    font-size:14px;
    font-weight:bold;
}

http://jsfiddle.net/nonamez/gGrrm/

So, i need to pick up div a little, that it would be almost on the same level with the logo. If needed there could be a height. May be someone can provide some slue on my problem?

Answer 1

The reason your menu is not on top is because

#navigation li a

has the padding:

padding:44px 0 0;

so arrange it properly by changing this line to:

padding:0;