带框阴影的 100% 宽度 div 与父 div 重叠

Question

我有一个居中的容器 div，其中当前有 3 个其他 div。它们都有盒子阴影（因此添加了大约 5px 的边距）。

我遇到的问题是第一个 div(upcoming) 是 100% 宽度并且在右侧被切断（overflow: hidden 已设置）。或者它溢出它包含一点 div 。这没关系，但下面的其他 2 个 div 浮动并并排，因此不会溢出一点（如果 size 设置为超过可用空间，则最近的 div 移动到 latest 之下）。

填充没有帮助。除了将宽度设置为 98% 之外，还有其他解决方案吗？

这是我正在使用的 css：

.mainSection{
    width:1020px;
    margin:70px auto 0px auto;
}

.widget{
    background-color:rgba(255, 255, 255, 0.5);
    -webkit-box-shadow:0 0 5px 2px #CCC;
    -moz-box-shadow:0 0 5px 2px #CCC;
    box-shadow:0 0 5px 2px #CCC;
    border:1px solid #CCC;
    margin:4px;
    overflow:hidden;
}

/* 3 child divs */

.widget.upcoming{
    float:left;
    width:100%;
    height:380px;
}

.widget.recent{
    float:right;
    width:260px;
    height:auto;
}

.widget.latest{
    float:left;
    width:740px;
    height:460px;
}

<section class="mainSection">
    <article class="widget upcoming">
        <header>
            <h3>Upcoming</h3>
        </header>
    </article>
    <article class="widget news">
        <article>
            <p>Some text</p>
        </article>
    </article>
    <article class="widget latest">
        <header>
            <h3>Latest</h3>
        </header>
    </article>
    <aside class="widget recent">
        <header>
            <h3>Recent</h3>
        </header>
    </aside>    
</section>

Answer 1

所以如果我们改变改变

.widget.upcoming{
   float:left;
   width:100%;
   height:380px;
}

到

 .widget.upcoming{
    height:380px;
 }

我觉得应该可以

http://jsbin.com/uharax/1