Stack two div then float left with CSS - css

Question

I'd like to have 5 divs (1, 2, 3, ...) displayed like this:
+---+ +---+ +---+
| 1 | | | | 4 |
+---+ | 3 | +---+
| 2 | | | | 5 |
+---+ +---+ +---+
where 3's height is twice as mush as 1, 2, 4, 5's ones.
Is there a way to position them like this without wrapping 1, 2 and 4, 5 into divs ?
Here's my HTML markup :
<div class="AlaOracles">
<div class="AlaOracle">
<img src="http://mywebsite.ru/wp-content/uploads/shutterstock_132379904.jpg" alt="mange l'écran" />
<div>
<div class="Header">
<div>
<div>
Some text
</div>
</div>
</div>
<div class="Body">
<div>
<div>
Some text<br />
[button link="#" color="orange" size="medium" type="flat" shape="square" target="_parent" title=" Test "] Mode de cuisson [/button]
</div>
</div>
</div>
</div>
</div>
<div class="AlaOracle">
<img src="http://mywebsite.ru/wp-content/uploads/shutterstock_132379904.jpg" alt="mange l'écran" />
<div>
<div class="Header">
<div>
<div>
Some text
</div>
</div>
</div>
<div class="Body">
<div>
<div>
Some text
</div>
</div>
</div>
</div>
</div>
<div class="AlaOracle Bigger">
<img src="http://mywebsite.ru/wp-content/uploads/shutterstock_132379904.jpg" alt="mange l'écran" />
<div>
<div class="Header">
<div>
<div>
Some text
</div>
</div>
</div>
<div class="Body">
<div>
<div>
Some text
</div>
</div>
</div>
</div>
</div>
<div class="AlaOracle">
<img src="http://mywebsite.ru/wp-content/uploads/shutterstock_132379904.jpg" alt="mange l'écran" />
<div>
<div class="Header">
<div>
<div>
Some text
</div>
</div>
</div>
<div class="Body">
<div>
<div>
Some text<br />
[button link="#" color="orange" size="medium" type="flat" shape="square" target="_parent" title=" Test "] Mode de cuisson [/button]
</div>
</div>
</div>
</div>
</div>
<div class="AlaOracle">
<img src="http://mywebsite.ru/wp-content/uploads/shutterstock_132379904.jpg" alt="mange l'écran" />
<div>
<div class="Header">
<div>
<div>
Some text
</div>
</div>
</div>
<div class="Body">
<div>
<div>
Some text<br />
[button link="#" color="orange" size="medium" type="flat" shape="square" target="_parent" title=" Test "] Mode de cuisson [/button]
</div>
</div>
</div>
</div>
</div>
</div>

Answer 1

Using Flexbox
Compatibility: IE11 and all modern browsers. Safari is supported with the -webkit- prefix.
If the lack of legacy browser support is not a problem, this is a good way to achieve this flexibility without using wrappers or javascript.
Let's make this
The HTML
Couldn't be simpler:
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
The CSS
the body (or a single outer wrapper) is given display: flex, flex-direction: column and flex-wrap: wrap so that the flex items will wrap themselves into columns. It is given an appropriate min and max width and is centered with margin: 0 auto
the divs are given flex: 1 1 50% this tells the div to have a default value of 50% and allow it to grow and shrink, even with a pixel value.
the middle column is given flex: 1 1 100% and it will be twice as tall. It can easily be selected using just nth-child(3)
Here is an excellent guide over on CSS Tricks.
Complete Example
body {
height: 50vh;
display: flex;
flex-direction: column;
flex-wrap: wrap;
margin: 0;
max-width: 1000px;
min-width: 300px;
margin: 0 auto;
}
body > div {
background: #F00;
flex: 1 1 50%;
}
body > div:nth-child(odd) {
background: #F90;
}
body > div:nth-child(3) {
flex: 1 1 100%;
margin: 0 20px;
background: purple;
}
<div>top left</div>
<div>bottom left</div>
<div>middle</div>
<div>top right</div>
<div>bottom right</div>

Answer 2

Maybe something like this?
div.one {
background-color: #f00;
width: 200px;
height: 200px;
}
div.two {
background-color: #0f0;
width: 200px;
height: 200px;
}
div.group-one {
float: left;
}
div.group-two {
float: left;
}
div.three {
background-color: #00f;
width: 200px;
height: 400px;
}
div.group-three {
float: left;
}
div.four {
background-color: #ff0;
width: 200px;
height: 200px;
}
div.five {
background-color: #0ff;
width: 200px;
height: 200px;
<div class="group-one">
<div class="one"></div>
<div class="two"></div>
</div>
<div class="group-two">
<div class="three"></div>
</div>
<div class="group-three">
<div class="four"></div>
<div class="five"></div>
</div>