內容不可見，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; 
} 

預覽>>http://jsfiddle.net/XJA4T/