How to achieve this complex layout with CSS? - css

Question

I've this (apparently) simple layout :
There is a lot of technique out there, but I can't find one that will fulfill all the requirements. Could you point me to te correct direction ?
Edit : I need my layout to be 100% of it's parent, and to fall back to divs (or td's) one under this other on small screens. See my fiddle.
And I will need gutters.
table
Piece of cake, of course, thanks to rowspan and colspan. And it's easily fluid. But, can't use media query to change the display for small screens.
Edit : actually, media query works with td's. I just set it as display:block on small screens, and here we go. This is my working fiddle. But you know, "table is bad"...
float
I didn't even try. Do you think I should have ?
imbricated div's
It's not possible to imbricated this. I could use absolute positionning, but it wouldn't be fluid anymore
flexbox
Each time I try to use flexbox, it ends with a headache. But if I'm not wrong, we can't have rowspan and colspan at the same time.
css grid layout
It's the graal. Maybe it's metaphysic.

Answer 1

I'd say float's is the easiest way, with position:relative and top:-x% (x based on % of boxes) on the blue one.
HTML:
<div class="container">
<div class="red portrait"></div>
<div class="green landscape"></div>
<div class="yellow landscape"></div>
<div class="blue portrait"></div>
</div>
CSS:
.container {
width:300px;
height:200px;
}
.container div {
float:left;
}
.red {
background-color:#e23812;
}
.yellow {
background-color:#e2df00;
clear:both;
}
.green {
background-color:#28a837;
}
.blue {
background-color:#224395;
position:relative;
top:-20%;
}
.portrait {
width:40%;
height:60%;
}
.landscape {
width:60%;
height:40%;
}
JSFiddle demo

Answer 2

My two cent on this issue, using some flexbox and without float.
See my fiddle.
Here would be the step by step approach:
we create a container box that will handle our design (200px by 300px)
we use flexbox to create a 2 by 2 box (without the hole in the middle). Flexbox helps to create two rows, each divided into two columns just using flex-flow: row wrap (it will distribute divs in a row, and when it's too narrow it wraps the rest into a new line).
In our case we need to fine-tune .landscape and .portrait divs to fit desired proportions (40% and 60% width or height depending on the case). As 60% + 40% will always occupy 100% of a row, we are assured that the flex-flow property will wrap the other two divs into a new line, itself fitting 100% as well.
At this stage, the shape looks pretty good except for the blue div which is not correctly aligned with the yellow one.
we just correct above point by applying basic repositioning to the blue div

Answer 3

I just did it here is a fiddler link
https://jsfiddle.net/48L7btg6/5/
I separated it into two parts:
- Part 1: the red and the green figure
- Part 2: the green and the blue figure
got the Part 2 as
position:absolute;
left:150px(or whatever you want);
top:0px(just in case?);
And you're done