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?
Padding is in the wrong place. Move it from .dualBgBlock {}
to .dualContainer {}
CSS:
div.dualContainer {
padding:20px;
}
div.dualBgBlock {
// No padding here
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With