Expanding on a previous inquiry of mine, I have created this interactive demo
The demo features two columns on top of one column in smaller views, and 3 columns in a row in larger views. While the layout functions as intended, I noticed a lack of spacing between the content blocks, which I wanted to address from a design perspective. To achieve this, I implemented an absolute positioned element within the cells to create the desired space. Surprisingly, this solution works perfectly in Chrome, but encounters issues in IE11 on desktop, Windows 8 app, and Windows phone.
In IE11, the blocks only expand to accommodate the content (despite the absolute blocks being empty...) This discrepancy seems to stem from IE factoring in the natural cell padding added by the browser to ensure equal cell heights. Interestingly, setting a fixed height for the block and using bottom:0 causes the block to adhere to the bottom of the cell.
Below is the HTML code used in the demo:
<div class="table">
<div class="cell"><div class="back"></div>One Line</div>
<div class="cell"><div class="back"></div>Two<br/>Lines</div>
<div class="cell"><div class="back"></div>More<br/>Than two<br/>Lines</div>
</div>
and here is the corresponding CSS:
.table {
display: table;
table-layout: fixed;
border-collapse: collapse;
width: 100%;
}
.cell {
display: table-cell;
border: 1px solid red;
position:relative;
padding:0px 10px;
}
.back {
position:absolute;
top:0;
bottom:0;
left:10px;
right:10px;
background:#777;
z-index:-10;
}
.cell:first-child .back {
right:5px;
}
.cell:nth-child(2) .back {
left:5px;
}
@media (max-width: 768px) {
.cell:last-child {
display: table-caption;
caption-side: bottom;
}
}
@media (min-width:769px){
.cell:last-child .back {
left:5px;
}
.cell:nth-child(2) .back {
right:5px;
}
}
Are there any CSS techniques or workarounds I could employ to make IE behave more like Chrome without resorting to JavaScript? Your insights would be greatly appreciated.