Question

I have a #wrapper div that is 100% height. Inside of that I have several content divs, each are displayed as inline-block and have a bottom margin. The problem is that this bottom margin is somehow being collapsed.

The problem can be seen with very simple code:

<div id="wrapper">
    <div id="content">
        <!-- lots of content here that will fill the browser window -->
    </div>
</div>

I’ve created an example which can be seen here: http://jsfiddle.net/Y6tJw/

I have a feeling this is a webkit issue as both Firefox and IE render the page with the proper margin. Any help?

Answer 1

Don’t ask me why it works, but this will work http://jsfiddle.net/Y6tJw/2/

Style

#wrapper { height: 100%; background: blue; }
#innerwrap { padding-bottom:300px; background: blue;}

HTML

<div id="wrapper">
<div id="innerwrap">
<div id="content">
    <!-- lots of content here that will fill the browser window -->
</div>
</div>
</div>