内容不可见，div延伸

Question

这是我的HTML。我遇到的问题是'box1'div甚至不显示，'nav'栏自身延伸。我不知道为什么......

<div id="nav">
    <ul>
        <li><a class="selected" href="link1">Home</a></li>
        <li><a href="link2">Services</a></li>
        <li><a href="link3">About</a></li>
        <li><a href="link4">Gallery</a></li>
        <li><a href="link5">Contact</a></li>
    </ul>
</div> <!--#nav-->
<div id="content">
    <div class="wrapper">
        <div class="box1">
            TEXT
        </div> <!--#box1-->
        <div class="box1">
            IMAGE
        </div> <!--#box1-->
    </div> <!--#wrapper-->
</div> <!--#content-->

CSS ......

#nav {
    background-color: #000;
}
#nav ul {
    margin: 0 auto;
    width: 80%;
}
#nav li {
    display: inline;
}
#content {
    margin: 0 auto;
    width: 80%;
    min-width: 720px;
}
.box1 {
    width: 40%;
    height: 100px;
    float: left;
    position: relative;
    padding-left: 6.33%;
}

建议？

Answer 1

.box1 {
    width: 40%;
    height: 100px;
    position: relative;
    padding-left: 6.33%;
    border: 1px solid #000;
    margin: 0 auto;
}

预览＆gt;＆gt; http://jsfiddle.net/XJA4T/