Magnus1986
New Member
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 \[code\]position:absolute\[/code\] 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:\[code\]<div id="container"> <a href="http://stackoverflow.com/questions/14063882/index.html" id="logo"></a> <div id="header"> <h2><a href="http://stackoverflow.com/questions/14063882/index.html">Collectif</a></h2> </div> <div id="nav"> <ul> <li><a href="http://stackoverflow.com/questions/14063882/#">About</a></li> <li><a href="http://stackoverflow.com/questions/14063882/#">Services</a></li> <li><a href="http://stackoverflow.com/questions/14063882/#">Work</a></li> </ul> </div>\[/code\]And here is my CSS:\[code\]#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;}\[/code\]