Fill empty spaces with sibling elements using CSS - html

Question

I'm trying to create a mosaic of images, but i'm having a hard time positioning them.
The elements i'm using are floated left, have different sizes and are following a specific display order. Is there a way of doing it using only CSS?
This is how i want it to be:
And this is how it is right now:
Finally, what i've coded so far:
span {
font-family: Arial;
}
.mosaic_wrapper {
float: left;
clear: both;
overflow: hidden;
width: 100%;
max-width: 1075px;
margin-bottom: 50px;
}
.mosaic_wrapper div {
float: left;
width: 100%
}
.mosaic_wrapper div .image_wrapper {
width: 48%;
height: 400px;
float: left;
position: relative;
margin: 0.5% 0.5%;
overflow: hidden;
}
.mosaic_wrapper div .image_wrapper a {
width: 100%;
height: 100%;
float: left;
}
.mosaic_wrapper div .image_wrapper a:hover img {
transform: scale(1.1);
}
.mosaic_wrapper div .image_wrapper a:hover span.bg {
opacity: 0.5;
}
.mosaic_wrapper div .image_wrapper a img {
float: left;
width: 100%;
height: 100%;
transition: transform 0.4s ease-in-out;
backface-visibility: hidden;
filter: grayscale(0%);
}
.mosaic_wrapper div .image_wrapper a span.bg {
background-image: linear-gradient(to bottom, #999999, #222222);
opacity: 0;
position: absolute;
width: 100%;
height: 100%;
top: 0;
z-index: 5;
display: block;
transition: opacity 0.3s ease;
}
.mosaic_wrapper div .image_wrapper a div.text {
color: #ffffff;
position: absolute;
font-size: 1.7rem;
bottom: 0;
z-index: 10;
padding: 20px;
box-sizing: border-box;
width: 100%;
}
.mosaic_wrapper div .image_wrapper a div.text span {
float: left;
width: 100%;
}
.mosaic_wrapper div .image_wrapper a div.text span.parent {
font-size: 14px;
text-transform: uppercase;
}
.mosaic_wrapper div .image_wrapper a div.text span.dept {
font-size: 50px;
font-weight: bold;
line-height: 1.1;
}
.mosaic_wrapper div .image_wrapper a div.text span.desc {
font-size: 14px;
line-height: 1.2;
}
<div class="mosaic_wrapper">
<div>
<div class="image_wrapper" style="width: 58%;">
<a href="#">
<img src="http://placehold.it/623x400">
<div class="text">
<span class="parent">Test</span>
<span class="dept">Test</span>
<span class="desc">Test</span>
</div>
<span class="bg"></span>
</a>
</div>
<div class="image_wrapper" style="width: 40%;height: 800px;">
<a href="#">
<img src="http://placehold.it/430x800">
<div class="text">
<span class="parent">Test</span>
<span class="dept">Test</span>
<span class="desc">Test</span>
</div>
<span class="bg"></span>
</a>
</div>
<div class="image_wrapper" style="width: 28%;">
<a href="#">
<img src="http://placehold.it/300x400">
<div class="text">
<span class="parent">Test</span>
<span class="dept">Test</span>
<span class="desc">Test</span>
</div>
<span class="bg"></span>
</a>
</div>
<div class="image_wrapper" style="width: 29%;">
<a href="#">
<img src="http://placehold.it/300x400">
<div class="text">
<span class="parent">Test</span>
<span class="dept">Test</span>
<span class="desc">Test</span>
</div>
<span class="bg"></span>
</a>
</div>
<div class="image_wrapper" style="width: 100%;">
<a href="#">
<img src="http://placehold.it/1075x400">
<div class="text">
<span class="parent">Test</span>
<span class="dept">Test</span>
<span class="desc">Test</span>
</div>
<span class="bg"></span>
</a>
</div>
</div>
</div>
Can someone please help?
Thanks in advance!

Answer 1

Add a float:right to the 430x800 mosaic;
<div class="image_wrapper" style="width: 40%;height: 800px;float:right">
<a href="#">
<img src="http://placehold.it/430x800">
<div class="text">
<span class="parent">Test</span>
<span class="dept">Test</span>
<span class="desc">Test</span>
</div>
<span class="bg"></span>
</a>
</div>
Alternatively you can add an id attribute to the 430x800 mosaic like id="rightMosaic"and create this style for it:
.mosaic_wrapper div .image_wrapper#rightMosaic{
float: right;
}
And of corse remove it from the inline style

Answer 2

I would use flex rows and columns to lay this out. Adjusted your image dimensions a little so everything will line up
* {
margin:0;padding:0;box-sizing:border-box;
}
.flex {
display: flex;
}
.col {
flex-direction: column;
}
img {
max-width: 100%;
display: block;
}
<div class="flex" style="margin: 0 0 12px;">
<div class="flex col" style="margin: 0 12px 0 0;">
<div style="margin: 0 0 12px 0;">
<img src="http://placehold.it/612x400">
</div>
<div class="flex">
<div style="margin: 0 12px 0 0;">
<img src="http://placehold.it/300x400">
</div>
<div>
<img src="http://placehold.it/300x400">
</div>
</div>
</div>
<div>
<img src="http://placehold.it/430x812">
</div>
</div>
<div>
<img src="http://placehold.it/1054x400">
</div>