Position div below responsive inline-block divs

Question

I have a grid of divs, each responsive to the browser size so that their width changes in proportion to their height (their ratio stays the same). I'd like a separate div (its height determined only by the text it contains) to sit underneath all these, creating additional space for itself at the foot of the page. At the moment it sits under the first row. Is there a solution?

Thanks for your help.

https://jsfiddle.net/Ly008adL/

CSS:

* {
margin: 0;
padding: 0;
}

.wrapper {
width: 100%;
display: inline-block;
position: relative;
}

.wrapper:after {
padding-top: 71%;
display: block;
content: '';
}

.main {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
}

.ratio {
display: inline-flex;
float: left;
width: 50%;
height: 100%;
}

.red {
background-color: red;
}

.yel {
background-color: yellow;
}

.foot {
position: relative;
}

HTML:

<div class="wrapper">
<div class="main">
    <div class="ratio yel"></div>
    <div class="ratio red"></div>
    <div class="ratio red"></div>
    <div class="ratio yel"></div>
    <div class="ratio yel"></div>
    <div class="ratio red"></div>
</div>
</div>
<div class="foot">
<p>Text for the foot of the page </p>
</div>

A friend helped me figure out a potential solution involving dividing the height by the number of rows, but I'm not sure on the total number of rows yet so something more flexible would be ideal...

Answer 1

The css ratio trick you are using was being applied to the .wrapper and not the individual elements.

I simply removed it from the .wrapper and applied it to the individual .ratio elements. I also had to double the padding-top from 71% to 142% to maintain the right ratio because these elements were 50% width and not 100% like the .wrapper was.

I also changed the .main div to position:relative; so that all the children would render out properly and so the .foot div would render after it.

See the updated fiddle here.