My goal is to have two divs fill the entire height of their container, which is a table-cell with variable height. Each div should take up 50% of its parent and be stacked on top of each other. To achieve this, I positioned the top one with top: 0; bottom: 50%; and the bottom one with bottom: 0; top: 50%. This method works well in most browsers except for IE9+.
On Chrome, Firefox, Safari, and surprisingly even IE8, my layout looks as expected. However, on IE9+, the absolutely positioned divs overlap for some reason.
This is what my layout markup looks like:
<div class="table">
<div class="cell">
Lorem ipsum dolor sit amet, consectetur adipiscing elit...
</div>
<div class="cell">
<div class="top">TOP DIV</div>
<div class="bottom">BOTTOM DIV</div>
</div>
</div>
And here are the styles I'm using:
.table {
display: table;
background-color: #cbcbcb;
border-spacing: 10px;
}
.cell {
display: table-cell;
vertical-align: middle;
position: relative;
width: 70%;
&:first-of-type {
width: 30%;
}
}
.bottom,
.top {
box-sizing: border-box;
position: absolute;
background-color: #fff;
padding: 20px;
width: 100%;
}
.bottom {
bottom: 0;
top: 50%;
margin-top: 5px;
}
.top {
top: 0;
bottom: 50%;
margin-bottom: 5px;
}
Feel free to experiment with the layout using this bin: http://jsbin.com/yifeqe/edit?html,css,output
Any suggestions or insights on why this issue is occurring?