13 replies

Vertical Alignment with Percentages, Logo with Aspect Ratio and Progress Bar Alignment

My problem comes in two parts, which seem to heavily rely on each other. The first is the vertical alignment problem. My page has a logo and a progress bar below it like so:

<section>
    <img src="logo.svg" id="logo">
    <div id="progress-bar"></div>
</section>

<section>
    <img src="logo.svg" id="logo">
    <div id="progress-bar"></div>
</section>

<section>
    <img src="logo.svg" id="logo">
    <div id="progress-bar"></div>
</section>

<section>
    <img src="logo.svg" id="logo">
    <div id="progress-bar"></div>
</section>

I need the spacing between these elements on the vertical axis to be the following:
1.

37.6%

37.6%

37.6%

37.6% of the

<section>

<section>

<section>

<section>'s height between the

<img>

<img>

<img>

<img> and the top of the

<section>

<section>

<section>

<section>
2.

20%

20%

20%

20% of the

<section>

<section>

<section>

<section>'s height between the

<img>

<img>

<img>

<img> and the progress bar

<div>

<div>

<div>

<div>
3.

14.7%

14.7%

14.7%

14.7% of the

<section>

<section>

<section>

<section>'s height between the progress bar

<div>

<div>

<div>

<div> and the bottom of the

<section>

<section>

<section>

<section>

I've tried using margins, top/bottom, flexbox, and grid. The best results I've gotten thus was by using flexbox, by inserting invisible elements where spacing is needed, and then giving them

flex-shrink: 0;

flex-shrink: 0;

flex-shrink: 0;

flex-shrink: 0;.

Anyways, not all solutions for this work, because I need the logo to keep its aspect ratio. When the page is squished vertically, I expect the logo to shrink, so the spacing maintains the correct values. I've achieved this using