title: How can I float divs so that they expand past their container?
body: <pre><code>&lt;div class="story-container"&gt;
    &lt;div class="story-box"&gt;
      &lt;h3&gt;News Item #2&lt;/h3&gt;
      &lt;h2&gt;This is my second news item!!&lt;/h2&gt;
    &lt;/div&gt;
    &lt;div class="story-box"&gt;
      &lt;h3&gt;Technical Development&lt;/h3&gt;
      &lt;h2&gt;See Muppets on Your Band-Aid With New AR App&lt;/h2&gt;
    &lt;/div&gt;
    &lt;div class="clear"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>My CSS is:</p>
  
  <pre><code>.story-container {
      background: none repeat scroll 0 0 blue;
      margin: 0 auto;
      width: 1000px;
  }
  
  .story-box {
      float: left;
      margin-right: 10px;
  }
  </code></pre>
  
  <p>I want the <code>story-box</code>'s to be next to each outer, but currently they don't do that. How can I make that happen?</p>
  
  <p><strong>EDIT</strong></p>
  
  <p>I want <code>story-box</code> to be 1000px as should the container. That way, the <code>story-box</code> takes up the full width of the container and then the next one is technically outside the bounds.</p>