Here is 2 column markup using display: table
and display: table-cell
CSS declarations:
But .container
block does not fill parent cell vertically. Here is an example on JsFiddle: http://jsfiddle.net/MGRdP/2.
What I have | What I need
Please, do not propose JS solution.
When you use %
for setting heights or widths, always set the widths/heights of parent elements as well:
.table {
display: table;
height: 100%;
}
.cell {
border: 2px solid black;
vertical-align: top;
display: table-cell;
height: 100%;
}
.container {
height: 100%;
border: 2px solid green;
-moz-box-sizing: border-box;
}
<div class="table">
<div class="cell">
<p>Text
<p>Text
<p>Text
<p>Text
<p>Text
<p>Text
<p>Text
<p>Text
</div>
<div class="cell">
<div class="container">Text</div>
</div>
</div>