html - 无法让 div 环绕我的标题。谁能明白为什么？

Question

对于我的生活，我不明白为什么我的“div”不会环绕标题...我已经关闭它，未指定高度...

我已经搜索了其他帖子，但到目前为止还没有解决方案。是否存在我忽略的冲突？

这是 html:

<div id="navcontainer">
    <div id="siteLogo"> <a href="index.html"><img src="images/some image in a folder"/></a>        

    <div id="menu">
        <ul>
          <li><a href="index.html">Home</a></li>
            <li><a href="calendar.html">Calendar</a></li>
            <li><a href="contact.html">Contact</a></li>
        </ul>
    </div>
    </div>
 </div>

还有 CSS:

#menu li a:hover { 
    color: #ff9900;
    border-bottom: 4px solid #ff9900;
}

#siteLogo img{
    height:auto;
    width: 220px;
}

#menu {
font-family: 'Comfortaa', Arial, Helvetica, sans-serif;
font-size: 16px;
color: #c0c0c0;
    }

#outer {
    width: 960px;
    margin:0 auto;
}

#wraper {
    width: 900px;
    margin:0 auto;
}

#navcontainer {
    width: 900px;
    margin: 0 auto;
    border-bottom: thick 1px #ffppoo;
}

#siteLogo {
    float: left;
    margin-top: auto;
}

#menu {
    float: right;
    margin-top: auto;
}

#menu ul li {
    display:inline;
}

#menu ul {
    margin-top: 50px;
    text-align: center;
}

#menu ul li a {
    padding:0 0 0 20px;
}

Answer 1

略微更改您的语法并包含/清除您的float:

#navcontainer {
  width: 900px;
  margin: 0 auto;
  border-bottom: solid 1px #000;
  overflow: hidden;
}

http://jsfiddle.net/xSfrb/