How can I create this simple float layout? - html

Question

I have a task that supports older browsers such as IE9, so I cannot use flexbox or CSS Grid.
I'm struggling with making the .second and .third have equal height as the .first div.
Here is my attempt.
https://codepen.io/abccba_123/pen/QWKMwpK
img {
width: 100%;
height: auto;
}
.first img {
background-color: gold;
}
.second img {
background-color: cyan;
}
.third img {
background-color: grey;
}
.container {
width: 1000px;
margin: 0 auto;
}
.container article {
position: relative;
}
.wrap {
position: absolute;
bottom: 0;
}
.first {
float: left;
width: 50%;
}
.second {
float: left;
width: 30%;
}
.third {
float: left;
width: 30%;
}
<div class="container">
<article class="first">
<img width="1920" height="1080">
<div class="wrap">
<h3>Lorem ipsum dolor sit amet.<h3>
</div>
</article>
<article class="second">
<img width="1920" height="1080">
<div class="wrap">
<h3>Lorem ipsum dolor sit amet.<h3>
</div>
</article>
<article class="third">
<img width="1920" height="1080">
<div class="wrap">
<h3>Lorem ipsum dolor sit amet.<h3>
</div>
</article>
</div>
What I want.
Thank you!!

Answer 1

You may also use a display:table reset ;) Understood by every browsers and IE8+
(.wrap div removed , but you can use it)
img {
width: 100%;
height: auto;
}
.first {
background-color: gold;
}
.second {
background-color: cyan;
margin-bottom: 5px;
}
.third {
background-color: grey;
}
.container {
width: 100%;/* for demo */
/* width:1000px; */
margin: 0 auto;
display: table;
/* IE8 + */
table-layout: fixed;
/* IE8 + */
border-spacing: 5px;
border: solid;
}
.container article {
border: solid;
margin: -left:5px;
}
h3 {
padding: 1em;
}
.img {
vertical-align: top;
}
.first {
display: table-cell;
/* IE8 + */
width: 50%;
vertical-align: top;
}
<div class="container">
<article class="first">
<img src="https://picsum.photos/id/118/536/354.jpg" width="1920" height="1080">
<h3>Lorem ipsum dolor sit amet. </h3>
</article>
<article class="second">
<img src="https://picsum.photos/id/1015/536/354.jpg" width="1920" height="1080">
<h3>Lorem ipsum dolor sit amet. </h3>
</article>
<article class="third">
<img src="https://picsum.photos/id/1016/536/354.jpg" width="1920" height="1080">
<h3>Lorem ipsum dolor sit amet. </h3>
</article>
</div>

Answer 2

A simple table layout:
img {
display:block;
}
.first img {
background-color: gold;
}
.second img {
background-color: cyan;
}
.third img {
background-color: grey;
}
.container {
margin: 0 auto;
}
.container td {
position: relative;
}
.container td h3 {
position:absolute;
bottom:0;
left:0;
right:0;
}
<table class="container">
<tr>
<td class="first" rowspan="2">
<img width="300" height="400">
<h3>Lorem ipsum dolor sit amet.</h3>
</td>
<td class="second">
<img width="300" height="200">
<h3>Lorem ipsum dolor sit amet.</h3>
</td>
</tr>
<tr>
<td class="third">
<img width="300" height="200">
<h3>Lorem ipsum dolor sit amet.</h3>
</td>
</tr>
</table>

Answer 3

.cont {
width: 1000px;
margin: 0 auto;
}
img {
width: 100%;
height: 100%;
}
article {
position: relative;
}
.first {
float: left;
width: 500px;
height: 300px;
background-color: gold;
}
.second, .third {
float: left;
width: 500px;
height: 150px;
overflow: hidden;
}
.second {
background-color: lime;
}
.third {
background-color: cyan;
}
.info {
color: white;
padding: 10px 10px 0 10px;
position: absolute;
bottom: 0;
left: 0;
right: 0;
}
<div class="cont">
<article class="first">
<img src="https://picsum.photos/1920/1080" width="1920" height="1080">
<div class="info">
<h3>Lorem ipsum dolor sit amet.</h3>
</div>
</article>
<article class="second">
<img src="https://picsum.photos/1920/1080" width="1920" height="1080">
<div class="info">
<h3>Lorem ipsum dolor sit amet.</h3>
</div>
</article>
<article class="third">
<img src="https://picsum.photos/1920/1080" width="1920" height="1080">
<div class="info">
<h3>Lorem ipsum dolor sit amet.</h3>
</div>
</article>
</div>
I've partially solved my own problem.