title: LI tabbed list and wrapping issues
body: <p>I have a tabbed LI system that (properly) wraps when the screen shrinks.  However, the content below these tabs needs to start below the last tab that has wrapped.  Can someone show me how this is done?</p>
  
  <p><strong>FIDDLE</strong></p>
  
  <p><a href="http://jsfiddle.net/jeljeljel/k5prw30g/5/" rel="nofollow">http://jsfiddle.net/jeljeljel/k5prw30g/5/</a></p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div class="bwtab"&gt;
      &lt;ul&gt;
          &lt;li class="active"&gt;AAAAAAAA1&lt;/li&gt;
          &lt;li&gt;AAAAAAAA2&lt;/li&gt;
          &lt;li&gt;AAAAAAAA3&lt;/li&gt;
          &lt;li&gt;AAAAAAAA4&lt;/li&gt;
          &lt;li&gt;AAAAAAAA5&lt;/li&gt;
          &lt;li&gt;AAAAAAAA6&lt;/li&gt;
          &lt;li&gt;AAAAAAAA7&lt;/li&gt;
          &lt;li&gt;AAAAAAAA8&lt;/li&gt;
          &lt;li&gt;AAAAAAAA9&lt;/li&gt;
          &lt;li&gt;AAAAAAAA10&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  &lt;div&gt;This content should display below the tabs&lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.bwtab {
      clear: both;
      position: relative;
      border-bottom: 1px solid #AAA;
      height: 34px;
      font-size: 14px;
      cursor: default;
  }
  .bwtab ul {
      position: absolute;
      padding: 0;
      padding-left: 5px;
      margin-top:7px;
  }
  .bwtab li {
      list-style: none;
      float: left;
      padding: 5px 10px;
      margin-left: 5px;
      margin-top: 1px;
      cursor: pointer;
      border-top-left-radius: 5px;
      border-top-right-radius: 5px;
      border: 1px solid #AAA;
      border-bottom: 0;
      margin-bottom: 5px;
  }
  .bwtab li.active {
      background-color: #FFF;
      border-bottom: 1px solid #FFF;
  }
  </code></pre>