inline-block fluid layout, child content will not expand parent container

Question

I asked a question earlier on here pertaining to a fluid 3 column layout I'm developing in a custom drupal front page and contributors suggested I switch from absolute container divs that use margins to dynamically resize to something else - I chose display:inline-block. (I hate floats and table cells seem like a step backwards)

I was able to evenly space my three divs no problem and even get the 100% height of the children to match the parent height when I specify a percentage height on all parent divs.

HOWEVER content in the child divs won't push the page wrapper div down so it overflows into and past the footer. if I set overflow:auto on the wrapper div, then it displays correctly BUT I get a scrollbar on the wrapper div which I do not want.

If I remove the height value from the page wrapper, child content expands the page wrapper as it should BUT I lose all my heights on my child divs!!!

is there some hack to make this work (or am I missing something) as I need it to or am I stuck doing it another way? I tried min-height:xx% and it doesn't work.

    <div id="page-div">
     <div id="inline-wrapper">
      <div id="top-content">
       <div id="left">user picture, links</div>
       <div id="center">blah blah blah blah blah</div>
       <div id="right">user picture, links</div>
      </div>
      <div id="a nav menu"></div>
      <div id="main-content">
       <div id="left">user picture, links</div>
       <div id="center">blah blah blah blah blah</div>
       <div id="right">user picture, links</div>
      </div>
     </div>
    </div>
    <div id="footer"></div>

html, body {height:100%}
#page-div {height:100%;width:80%;margin:0 auto;}
#inline-wrapper {height:100%;width:100%;background-color:#fff;}
#top-content {height:100%; width:98%;}
#top-content div {vertical-align:top;}
#left, #center, #right {display:inline-block;height:100%;}
#left, #right {width:13%;background-color:#000;}
#center {width:74%;}
#footer {height:250px;width:100%;margin-top:3%;}

Answer 1

Not too sure table is not appropriate, it does exectly what you want, it takes 100%, and grow pushdown everything .

http://codepen.io/gcyrillus/pen/hsEbJ (display-table used for it's ability to grow from any given heigth)

http://codepen.io/gcyrillus/pen/udvgj (display:inline-block that pushes not much if height is given :) )

element {display:inline-block;}
            /* or ? */
element {display:table;}

In fact (IMHO), display and float exists and each values gives different behavior, they should be chosen where you need them and not if it's 'hype' or 'has been' .
Vintage is cool ;) .

display:flex will put order soon :)