html - 无法让div环绕我的标题。谁能看到原因？

对于我一生，我看不到为什么我的“ 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;
}

最佳答案

稍微更改语法并包含/清除您的float：

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

http://jsfiddle.net/xSfrb/