You want a table , not inline-block
Whenever you want an element to occupy available space , you should consider display: table as a last resort. The inline-block and block elements are useful when working with content that is inside them, but are rather limited by what they can do in terms of the space of its parent container. Elements inside the table naturally fill the available space, which greatly facilitates their work when trying to achieve some design goals.
To do this, you will need a lot of wrappers. Pass through them one by one.
#contentwrapper
First, create the #contentwrapper table and give it 2 cells to create the left and right columns. In the left column is #a .
<div id="contentwrapper"> <div id="a"></div> <div id="b"></div> </div>
#contentwrapper { display: table; } #a { display: table-cell; } #b { display: table-cell; }
#bcontentwrapper
Now go to the right column. Create a table #bcontentwrapper under #b . Inside this table, we need 2 rows, each of which contains 1 cell, to build #rw and #x .
We give #rwwrapper height of 0 and #xwrapper height of 100% , so that the height of #rw will depend on its contents, and #x will always occupy the remaining height of the table.
If you're interested, setting the height to 0 will not break the line in the horizontal line, since the line height should be at least the height required by its cells , provided that you have content inside. And since rows and cells cannot overflow the table, a row with a positive height plus a row with a height of 100% cannot exceed 100% . The second line is forced to take any height left by the first, giving us only what we need.
<div id="bcontentwrapper"> <div id="rwwrapper"> <div id="rw"></div> </div> <div id="xwrapper"> <div id="x"></div> </div> </div>
#bcontentwrapper { display: table; } #rwwrapper { display: table-row; height: 0; } #rw { display: table-cell; } #xwrapper { display: table-row; height: 100%; } #x { display: table-cell; }
Put them together
We put these 2 tables together and see how it looks.
<div id="contentwrapper"> <div id="a"></div> <div id="b"> <div id="bcontentwrapper"> <div id="rwwrapper"> <div id="rw"></div> </div> <div id="xwrapper"> <div id="x"></div> </div> </div> </div> </div>
Ooops, this seems like the problem we're starting with. Will we go back to the square?
Don’t worry, the last trick is left. Remember that we want #x take available height? Naturally, you will need to provide the table #bcontentwrapper a 100% height so that it fills the entire cell #b , and thus #x can take whatever is left inside this table.
But this is not enough. #b will try to adjust the height to fit its contents, rather than occupying the same height as #a . If the content in #b less than in #a , #b will be less than #a , leaving space outside and there will be no available space for #x to use.
To fix this, give #b height of 0 . This should replace the default auto height, which forces it to accept the minimum height required by its contents, and not the height of the line it is in (implicit line for #a and #b ). And since the line height should be at least the height required by its cells, 0 here allows #b to take as much height as needed and keep the heights #a and #b in sync.
#b { display: table-cell; height: 0; } #bcontentwrapper { display: table; height: 100%; }
With everything done, #x can finally tackle the available space that he has always strived for.
Demo
Here is an interactive demonstration of all the things we have discussed so far. The main elements are made contenteditable , so you can change the content and see how the layout is customized.
Caveat
The above solution only works on Firefox, Chrome, Safari and Opera. To do this work on IE, sigh, you need to use <table> .
<table id="contentwrapper"> <tbody> <tr> <td id="a" rowspan="2"></td> <td id="rw"></td> </tr> <tr> <td id="x"></td> </tr> </tbody> </table>
Click here for a demonstration of <table> . This is ugly, but IE has always been an exception. So no matter what.