css - 应用于容器 div 的框阴影会切断最后两个浮动子 div

Question

我在mainContent包含其他 6 个 div 的 div 上应用框阴影，但框阴影应用于mainContent最后两个浮动 div 上方的 div 部分。

jsfiddle

HTML：

<div id="mainContent">
    <div id="div1">
            <h1>Welcome to the Archive </h1>

            <h2>The Internet Archive, is a digital library of files and other cultural 
                artifacts in digital form.</h2>

    </div>
    <div class="div11">
            <h3>Archive 1</h3>

        <p>some info</p>
    </div>
    <div class="div12">
            <h3>Archive 2</h3>

        <p>info</p>
    </div>
    <div class="div13">
            <h3>Archive 3</h3>

        <p>info</p>
    </div>
    <div class="left">
            <h4>Jasdasdasdasd</h4>

        <p><em>some info on how to use the website</em>

        </p>
    </div>
    <div class="right">
            <h3>archive1</h3>

        <p>Most recently added archives comes here</p>
        <br />
            <h3>asdasdsd</h3>

        <p>Most recently added archives comes here</p>
    </div>

</div> 

CSS：

#mainContent {
    width:970px;
    padding-bottom:55px;
    /*equal to footers height*/
    background:#fff;
    margin-bottom:10px;
    padding:10px 10px 10px 10px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    border-bottom-left-radius:3px;
    border-bottom-right-radius:3px;
    box-shadow: 0 0 20px #ccc;
}
.left {
    float: left;
    width: 250px;
    height:auto;
}
.right {
    float: right;
    width: 630px;
    margin: 0 0 20px;
    height:auto;
}

Answer 1

添加：

<div style="clear: both"></div>

在 div 收盘价上方的底部。

http://jsfiddle.net/3LxkY/2/

Answer 2

试试这个.............

#mainContent{
            width:970px;
            padding-bottom:55px;
            /*equal to footers height*/
            background:#fff;
            margin-bottom:10px;
            padding:10px 10px 10px 10px;
           -moz-border-radius: 5px;
            border-radius: 5px;
            border-bottom-left-radius:3px;
            border-bottom-right-radius:3px;
            box-shadow: 0 0 20px #ccc;
            overflow: hidden;
            }
      .left{
           float: left;
           width: 250px;
           height:auto;
           }
     .right{
          float: right;
          width: 630px;
          margin: 0 0 20px;
          height:auto;
          }