Wie kann ich divs schweben, so dass sie über ihren Container hinaus erweitern?

Question

<div class="story-container">
  <div class="story-box">
    <h3>News Item #2</h3>
    <h2>This is my second news item!!</h2>
  </div>
  <div class="story-box">
    <h3>Technical Development</h3>
    <h2>See Muppets on Your Band-Aid With New AR App</h2>
  </div>
  <div class="clear"></div>
</div>

Mein CSS ist:

.story-container {
    background: none repeat scroll 0 0 blue;
    margin: 0 auto;
    width: 1000px;
}

.story-box {
    float: left;
    margin-right: 10px;
}

Ich möchte die story-box nebeneinander stehen, aber das ist derzeit nicht der Fall. Wie kann ich das erreichen?

EDITAR

Ich möchte story-box 1000px zu sein, wie auch der Container. Auf diese Weise wird die story-box die gesamte Breite des Containers einnimmt und der nächste technisch gesehen außerhalb der Begrenzungen liegt.