title: li element won't properly wrap within its container
body: <p>I want to make the horizontal boxes with the size of 200 x 200 pixel each.  I decide to use the <code>ul li</code>. and you guys know well that I must apply the <code>float:left</code> attribute to the <code>li</code> tag to make it horizontal. </p>
  
  <p>My problem is that when I apply the <code>float:left</code> to the <code>li</code> element, all content in <code>li</code> completely breaks its container. I noticed this because I append the border style to the main container and all the content is in the new line below the main container.</p>
  
  <p>Here is my code</p>
  
  <p>HTML :</p>
  
  <pre><code>&lt;div class="content-box"&gt;
     &lt;h3 class="box-header"&gt;Recent Files&lt;/h3&gt;
     &lt;ul class="horizontal-content"&gt;
         &lt;li&gt;
            &lt;div class="filebox"&gt;
            &lt;/div&gt;
         &lt;/li&gt;
     &lt;/ul&gt;
  &lt;/div&gt; 
  </code></pre>
  
  <p>and the css :</p>
  
  <pre><code>.content-box {
     position:relative;
     width:800px;
     border:1px solid #dadada;
     margin-left:10px;
     padding:10px;
  }
  
  ul.horizontal-content {
      list-style:none outside none;
  }
  
  ul.horizontal-content &gt; li {
  float:left;
  display:block;
  padding:10px;
  }
  
  .filebox {
  position:relative;
  padding:15px;
  width:200px;
  height:200px;
  border:1px solid #dadada;
  background-color:#ecf0f1;
  }
  </code></pre>
  
  <p>Now you see all of my code, please help me figure out what I have done wrong.</p>