box shadow applied to container div cuts off the last two floating child divs

Question

I am applying box shadow on the mainContent div which contains 6 other divs but the box shadow is applied to the section of the mainContent div just above the last two floating divs.

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;
}

score 1 · Accepted Answer · answered May 10 '13 at 05:22

1

Add:

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

at the bottom above the close of the div.

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

answered May 10 '13 at 05:22

Dan P.

1,433
1
16
28

worked. Thanks!! So do all floating divs at the end of the parent div have to be always cleared? – thunderbird May 10 '13 at 05:30

score 1 · Answer 2 · answered May 10 '13 at 05:34

try this.............

#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;
          }

@DanielPatz this worked as well. This seems to be a better solution than adding another div clearing the floating divs. Any side effects of using `overflow:hidden`? — thunderbird, May 10 '13 at 05:43

box shadow applied to container div cuts off the last two floating child divs

2 Answers2