Html 如何使div浮动以使其扩展到容器之外？

我希望

故事框

紧挨着每个外部，但目前他们没有这样做。我怎样才能做到这一点

编辑

---

我希望

故事框

与容器一样为1000px。这样,，

故事框

占据了容器的整个宽度，然后下一个在技术上超出了边界。

您可以添加一个新类

故事行

并将其宽度设置为非常大，而不是依赖

浮动

清除来扩展超过

故事容器

的边界

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

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

新闻项目#2
这是我的第二条新闻！！
技术发展
看到你的创可贴上的木偶与新的AR应用程序
​
.故事容器{
背景：无重复滚动0 0蓝色；
保证金：0自动；
宽度：1000px；
高度：100px；
位置：相对位置；
溢出：隐藏；
}
.故事排{
宽度：2000px；/*1000px的层数*/
位置：绝对位置；
}
.故事箱{
浮动：左；
右边距：10px；
位置：相对位置；
宽度：1000px；
高度：100px；
}

---

现在，如果你想用javascript或其他工具滚动下一个故事，你只需将

故事行的位置每次调整-1000px即可。
给你的
故事框一个
宽度

编辑：尝试
宽度：490px如果您想要半宽


或
宽度：990px要获得此功能，请执行以下操作：
他们紧靠着我看：编辑我的问题以反映我的真实愿望希望我的问题更加准确
.story-container {
    background: none repeat scroll 0 0 blue;
    margin: 0 auto;
    width: 1000px;
}

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

<div class="story-container">
  <div class="story-row">            
      <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>
</div>
​

.story-container {
    background: none repeat scroll 0 0 blue;
    margin: 0 auto;
    width: 1000px;
    height: 100px;
    position: relative;
    overflow: hidden;
}

.story-row {
  width: 2000px; /* num of stories by 1000px */
  position: absolute;
}

.story-box {
    float: left;
    margin-right: 10px;
    position: relative;
    width: 1000px;
    height:100px;
}