Why does this simple, nested DIV render differently in Chrome and FireFox?

Question

This nested div renders differently in FireFox and Chrome. Chrome, with the result I am looking for. A div that can grow with content, inside of another div that has a padding of 20px.

The effect should look like it has a 20px bar above and below the nested div like this (in Chrome). http://jsfiddle.net/SEOplay/58xRJ/2/embedded/result/

The code I'm using:

HTML

<section>
    <div class="dualContainer">
        <div class="dualBgBlock"></div>
        <div class="dualMiddle">
            <div class="dualContent"></div>
        </div>
    </div>
</section>

CSS

div.dualContainer {
    margin-top:50px;
    margin-bottom:20px;
    position:relative;
    z-index:0;
    width:100%;
}
div.dualBgBlock {
    position:absolute;
    top:0;
    bottom:0;
    right:0;
    left:0;
    margin:auto;
    background-color:#ccc;
    width:60%;
    height:100%;
    padding:20px;
}
div.dualMiddle {
    width:80%;
    margin:0 auto;
}
div.dualContent {
    background-color:#333;
    overflow:hidden;
    position:relative;
    height:200px;
}

Link to the fiddle: http://jsfiddle.net/SEOplay/58xRJ/2/

So how can I get FireFox to render my code the way Chrome does?

Answer 1

Padding is in the wrong place. Move it from .dualBgBlock {} to .dualContainer {}

Fiddle Example

CSS:

div.dualContainer {
    padding:20px;
}

div.dualBgBlock {
    // No padding here
}

Answer 2

move your padding to div.dualMiddle, see demo here

div.dualBgBlock {
    position:absolute;
    top:0;
    bottom:0;
    right:0;
    left:0;
    margin:auto;
    background-color:#ccc;
    width:60%;
    height:100%;
    padding:20px; //remove this line

}
div.dualMiddle {
    width:80%;
    margin:0 auto;
    padding:20px;  //add this line
}