Best Practice for displaying logo larger than navigation bar

Question

my question is:

If I want to display a 100px by 100px logo on the left of my nav bar, but my nav bar has only 50px height... How should I design the html structures and css rules ?

Right now I use:

<div id="header">
<div id="header-wrapper">
    <ul id="nav">
    <a id="logo" href="#" ></a>
    <li><a href="#"</a></li>
            <li><a href="#"</a></li>
            <li><a href="#"</a></li>
    <li><a href="#"</a></li>
    </ul><!-- #nav -->
</div><!-- #header-wrapper-->
</div><!-- #header -->

Where CSS codes are:

#header {
height: 50px;
position: relative;
border-bottom: 5px solid #e5dacd;
background: #1075bc;
margin-bottom: 60px;}

#header-wrapper {
margin: 0 auto;
width: 940px;}

#logo {
width:  100px;
height: 100px;
background: url(images/logo.png) no-repeat;
background-color: yellow;
display: inline-block;
*display: inline;
zoom: 1;}

#nav {
display: inline-block;
*display: inline;
zoom: 1;
vertical-align: top;
margin: 16px 0 0 0;}

Is there any better way to do the trick ? (in terms of flexibility or compatibility to future modifications)

Answer 1

You have a few choices - set the logo to position: absolute and position it where you need it, this way it won't be constrained to it's parent's height.

Or you can try to give it negative margins and make sure that overflow for the header is not hidden