将绝对div沿相对位置放置

Question

I'm trying to position an absolute object beside a relative object. The initial object causes the relative div to wrap to the next line.

Everything is working as it should be, with the exception of the logo forcing the title to move to a new "line". If I change the #logo div to be position:absolute I can fix the positioning problem, but then my logo hover ceases to function.

Edit: Here's a live demo: http://vaer.ca/warm-forest-8234/

Here is my HTML:

<div id="container">

        <a href="index.html" id="logo"></a>

        <div id="header">

            <h2><a href="index.html">Collectif</a></h2>

        </div>  

        <div id="nav">
            <ul>
                <li><a href="#">About</a></li>
                <li><a href="#">Services</a></li>
                <li><a href="#">Work</a></li>
            </ul>
        </div>

And here is my CSS:

#container {
    width: 980px;
    margin: 0 auto;
    position: relative;
    }

#header {
    height: 75px;
    text-align: right;
    position: relative;
    }

#header h2 {
    font-size: 2.5em;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding-top: 15px;
    }

#header a {
    text-decoration: none;
    color: #000000;
    -o-transition:.5s;
    -ms-transition:.5s;
    -moz-transition:.5s;
    -webkit-transition:.5s;
    transition:.5s;
    }

#header a:hover {
    color: #7acfdd;
    }

#logo {
    position: relative;
    display: block;
    margin-top: 10px;
    margin-left: 10px;
    background: url('../img/logo.png') no-repeat;
    width: 60px;
    height: 60px;
    -o-transition:.5s;
    -ms-transition:.5s;
    -moz-transition:.5s;
    -webkit-transition:.5s;
    transition:.5s;
    }

#logo:hover {
    position: relative;
    background: url('../img/logo-hover.png') no-repeat;
}

Answer 1

Try:

#logo {
    float: left;
}

Answer 2

I would say :

#logo {
    float: left;
    position: relative;
}

#header {
    height: 75px;
    text-align: right;
    position: relative;
    clear:both;
}

And its just fine to use a float: left; and position: relative; (I'm always using it when i need to float a div on top of an other because when you use a position: relative; you can apply an z-index)

Answer 3

You have set you #logo link to display:block forces the <a> element to take up that whole space. See it by using the developer tools. You can do the following to fix it all and along with that, make it more semantic.

#logo{
display:inline-block;
}
#header{
display:inline-block;
float:right
}

These changes will get you your desired results.