Get straight to the point.
I'm looking for a solution to create a responsive two-column layout like the one shown in the image below.
https://i.sstatic.net/mHhfc.png
The width ratio of the .left and .right columns should always be 75/25% relative to the .parent, and their heights should remain synchronized.
The .left column should contain an image that adjusts in size based on the viewport, while the .right column should have three child elements (.cta) taking up exactly 1/3 of the height of .parent each.
The requirements for an acceptable solution are:
- Support for a wide range of devices and browsers (IE9+ is acceptable)
- Compatibility with vendor-specific browsers used by brands like HTC
- No use of flexbox
- Avoid using JavaScript to set explicit heights for
.leftand.rightcolumns
The closest solution I've found involves using display: table-cell; to keep the heights of .left and .right in sync. However, this method doesn't work in IE due to conflicts between parent and child containers when defining dimensions as percentages. This causes the .right container to expand to full height in all browsers except IE.
HTML
<div class="parent">
<div class="left">
<div class="image-container"><img class="image" src="http://placehold.it/1300x780" alt="" /></div>
</div>
<div class="right">
<div class="cta">
<a>LINK #1</a>
</div>
<div class="cta">
<a>LINK #2</a>
</div>
<div class="cta">
<a>LINK #3</a>
</div>
</div>
</div>
CSS
.parent {
display: table;
width: 90%;
height: 100%;
margin: 0 auto;
}
.parent > div {
display: table-cell;
height: 100%;
vertical-align: top;
text-align: center;
}
.left {
width: 75%;
}
.image {
display: block;
width: 100%;
height: auto;
}
.right {
width: 25%;
background: #bbb;
}
.cta {
display: table;
width: 100%;
height: 33.33%;
font-family: Helvetica, Arial, sans-serif;
overflow: hidden;
background: #bbb;
color: #fff;
text-transform: uppercase;
text-align: center;
}
.cta a {
display: table-cell;
vertical-align: middle;
height: 100%;
cursor: pointer;
}
If all else fails, there's always JavaScript as a backup solution. It's frustrating that in 2016 we still need hacks to achieve such simple layouts.