While this code snippet functions perfectly in WebKit browsers, it encounters issues when used in IE and Firefox. Unfortunately, due to other necessary functionalities, using the img tag is essential, making background-image an unviable option.
Code Snippet
img {
max-width: 100%;
height: auto;
}
.vgp-dtable {
width: 100%;
max-width: 860px;
margin: 0 auto 1em;
display: table;
}
.vgp-dtable .row {
display: table-row;
}
.vgp-dtable .row .art,
.vgp-dtable .row .txt {
display: table-cell;
vertical-align: top;
}
.vgp-dtable .row .art {
width: 30%;
text-align: right;
}
.vgp-dtable .row .art img {
width: auto;
max-height: 280px;
}
.vgp-dtable .row .txt {
width: 70%;
text-align: left;
padding-left: 8px;
}<div class="vgp-dtable">
<div class="row">
<div class="art">
<img src="http://vgpavilion.com/mags/1982/12/vg/ads/003-004-005_tn.jpg">
</div>
<div class="txt">
<p>Here's some sample text.</p>
</div>
</div>
<a id="riddle-of-the-sphinx"></a>
<div class="row">
<div class="art">
<img src="http://vgpavilion.com/mags/1982/12/vg/thumbs/007.jpg">
</div>
<div class="txt">
<p>Here's some sample text.</p>
</div>
</div>
</div>Despite successfully resizing images to fit within the 30% wide container block with a maximum height of 280px in WebKit, Firefox and IE do not adhere to the specified width but only respect the max-height, causing the images to widen their container beyond 30%.
A functional sample can be viewed here. The working example utilizes a float method, while the broken implementation uses display:table.
You can access the full page here
I have experimented with various containers, yet the images fail to comply with the specified width in Firefox or IE unless absolute terms are utilized. While resorting to the background-image solution that functions across all tested browsers, I prefer avoiding it. Switching to a float from display: table-cell has provided a workaround, but the identical table approach breaking in IE and Firefox remains perplexing. Any insights into potentially overlooked elements or unnecessary additions would be greatly appreciated.