CSS columns: left/right split, middle content stacked - html

Question

I have a problem with my images. I want to make 4 images look like this:
Image
But unfortunately image number 4 is under the rest of them and sticked to the left side of the document. I want it to be sticked to number 2 and 3.
Here is my code:
<div id="images">
<div class="off1"><img src='img/off1.jpg' /></div>
<div class="off2"><img src='img/off2.jpg' /></div>
<div class="off3"><img src='img/off3.jpg' /></div>
<div class="off4"><img src='img/off4.jpg' /></div>
</div>
And css:
.off1
{
float: left;
display: block;
}
.off2
{
display: block;
}
.off3
{
display: block;
position: relative;
bottom: 3px;
}
.off4
{
display: inline-block;
}
Thanks for help!

Answer 1

Add a wrapper element for image div 2 and 3, make that and divs 1 and 4 floats and give div 3 line-height: 0 to avoid a gap between 2 and 3:
http://codepen.io/anon/pen/gLdOyY

Answer 2

Use a mix of floats, positioning, and source-ordering. NO ADDED MARKUP.
Hope this helps you. Source-ordering can be a burden (which is why it's hard to do float:right on .off4. Yet, with CSS there's always a way!
/* added style for example only */
.off1 {
background-color: red;
height: 300px;
width: 100px;
}
.off2 {
background-color: #AAA;
width: auto;
height: 150px;
}
.off3 {
background-color: #ae5433;
width: auto;
height: 150px;
}
.off4 {
background-color: purple;
width: 100px;
height: 300px;
}
/* end added, example style */
#images {
position: relative;
}
.off1 {
float: left;
}
.off2,
.off3 {
width: auto;
}
.off4 {
position: absolute;
top: 0;
right: 0;
}
<div id="images">
<div class="off1">
<img src='img/off1.jpg' />
</div>
<div class="off2">
<img src='img/off2.jpg' />
</div>
<div class="off3">
<img src='img/off3.jpg' />
</div>
<div class="off4">
<img src='img/off4.jpg' />
</div>
</div>