How to achieve 2 rows + 1 column grid layout - html

Question

I'm trying to come up with simple way of creating a grid like container that has 2 columns, one column split up into 2 rows and the other column full height. Here's an image illustrating what I'm after.
It looks a bit complicated but I was thinking about using a responsive grid system to get this to look the way I want. I've tried various grid layouts and none seem to be able to mimic what I'm after, mainly the right column being full height and the left column being split into two.
Does anyone know of a way to do this? I tried bootstrap but it's not really responsive enough for this I feel. Please correct me if I'm wrong. Any guidance would be very much appreciated.
Thanks!

Answer 1

Using Bootstrap, here's an example structure. Just about any responsive grid will be similar. If you want to write your own grid, use your browser's document inspector to check out what Bootstrap does for the row and column elements.
<div class="container-fluid">
<div class="row">
<div class="col-xs-6">
<div class="row">
<div class="col-xs-12 pink"></div>
<div class="col-xs-12 green"></div>
</div>
</div>
<div class="col-xs-6 blue"></div>
</div>
</div>
Demo
If you want something that fills the screen vertically (but may need internal scrollbars to contain your content), this would do:
div {
position: absolute;
width: 50%;
height: 50%;
}
#one {
top: 0;
left: 0;
}
#two {
top: 50%;
left: 0;
}
#three {
top: 0;
left: 50%;
height: 100%;
}
Demo
<div id="one"></div>
<div id="two"></div>
<div id="three"></div>