CSS Positioning - Fill whitespace from floated elements - html

How do I go about positioning Box4 so that is pushed up against Box1?
Looking forward to your suggestions and any help would be much appreciated.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="align.css">
</head>
<body>
<div>
<section class="boxes">
<b>BOX1</b>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt, nihil excepturi laudantium ipsum! Voluptate ducimus velit voluptatibus, molestias modi quia dignissimos sint dolorum quasi nemo asperiores sit reiciendis ipsam, neque?
</section>
<section class="boxes">
<b>BOX2</b>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt, nihil excepturi laudantium ipsum! Voluptate ducimus velit voluptatibus, molestias modi quia dignissimos sint dolorum quasi nemo asperiores sit reiciendis ipsam, neque?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt, nihil excepturi laudantium ipsum! Voluptate ducimus velit voluptatibus, molestias modi quia dignissimos sint dolorum quasi nemo asperiores sit reiciendis ipsam, neque?
</section>
<section class="boxes">
<b>BOX3</b>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt, nihil excepturi laudantium ipsum! Voluptate ducimus velit voluptatibus, molestias modi quia dignissimos sint dolorum quasi nemo asperiores sit reiciendis ipsam, neque?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt, nihil excepturi laudantium ipsum! Voluptate ducimus velit voluptatibus, molestias modi quia dignissimos sint dolorum quasi nemo asperiores sit reiciendis ipsam, neque?
</section>
<section class="boxes">
<b>BOX4</b>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt, nihil excepturi laudantium ipsum! Voluptate ducimus velit voluptatibus, molestias modi quia dignissimos sint dolorum quasi nemo asperiores sit reiciendis ipsam, neque?
</section>
<section class="boxes">
<b>BOX5</b>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt, nihil excepturi laudantium ipsum! Voluptate ducimus velit voluptatibus, molestias modi quia dignissimos sint dolorum quasi nemo asperiores sit reiciendis ipsam, neque?
</section>
</div>
.boxes {
width: 500px;
border: 1px solid black;
float: left;
}


Either you divide it in 3 rows vertically and place in there the elements, or you have to absolute position them with some math which is quite hard. but no worries, there is a great plugin masonry that handles it for you.
Good luck!

Related

Div to always occupy the size of the window in height and width

I'm trying to enter the page to display a div on the entire screen (full width and full height) whatever the size of the browser window. That is to say, that div occupies ALL and until you do not scroll you do not see what is underneath.
It seems to work in the high, because even if you make it higher or smaller the next div below is not seen unless you scroll down, so far so good.
But in the width is another matter, it does not cover me the totality, and on top if I reduce the width of the window of the navigator the text is not molded to that width and the horizontal scroll appears.
Translated with www.DeepL.com/Translator (free version)
HTML code
<div id="slider-total">
<h1>Prueba de titulo</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem nesciunt et explicabo impedit ducimus facere quam ipsum vero, accusamus molestias! Dolore perferendis pariatur esse at eaque qui aspernatur consectetur laboriosam.</p>
</div>
<div id="siguiente">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste blanditiis sint labore, veritatis quidem sed nemo iure velit tenetur aspernatur facere quasi ullam assumenda, recusandae cupiditate laborum dolore excepturi eveniet?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque quis iure sunt temporibus nostrum voluptatum doloremque, explicabo deleniti voluptatibus a enim nobis, tenetur perspiciatis repellendus error unde libero vero voluptatem! Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo asperiores ullam ratione iusto error minima temporibus dolores facere, aliquam alias dicta eveniet, debitis quo deserunt soluta, voluptatum optio suscipit expedita. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Delectus enim esse porro mollitia, facilis dolor voluptate iste, facere maxime minus id suscipit. Quaerat dolorum suscipit quo maiores quas temporibus tempore. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia placeat ullam amet ipsa libero quibusdam inventore fugit dolorum nostrum, animi velit reprehenderit neque, doloribus repudiandae enim vitae ducimus qui harum? Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eaque dolorem sapiente a, ea fuga voluptate mollitia inventore, impedit nihil optio aut itaque consectetur! Corrupti reiciendis quis, odit ducimus quod obcaecati!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste blanditiis sint labore, veritatis quidem sed nemo iure velit tenetur aspernatur facere quasi ullam assumenda, recusandae cupiditate laborum dolore excepturi eveniet?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque quis iure sunt temporibus nostrum voluptatum doloremque, explicabo deleniti voluptatibus a enim nobis, tenetur perspiciatis repellendus error unde libero vero voluptatem! Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo asperiores ullam ratione iusto error minima temporibus dolores facere, aliquam alias dicta eveniet, debitis quo deserunt soluta, voluptatum optio suscipit expedita. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Delectus enim esse porro mollitia, facilis dolor voluptate iste, facere maxime minus id suscipit. Quaerat dolorum suscipit quo maiores quas temporibus tempore. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia placeat ullam amet ipsa libero quibusdam inventore fugit dolorum nostrum, animi velit reprehenderit neque, doloribus repudiandae enim vitae ducimus qui harum? Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eaque dolorem sapiente a, ea fuga voluptate mollitia inventore, impedit nihil optio aut itaque consectetur! Corrupti reiciendis quis, odit ducimus quod obcaecati!</p>
</div>
CSS code:
* {
box-sizing: border-box;
}
#slider-total {
width: 100vh;
height: 100vh;
background-color: #444;
color: white;
display: flex;
flex-flow: column wrap;
align-items: center;
justify-content: center;
}
What am I doing wrong?
Thanks

Your width is 100vh, or 100 percentiles of the viewport height. It makes sense, therefore, that the width of the <div> will be smaller than needed if you have a viewport that is wider than it is tall. It should be 100vw, or 100 percentiles of the viewport width.

Is it possible to ignore video element underneath sticky navbar to enable links?

I'm a total beginner and I'm trying to make my first website.
My problem is that when I scroll down the website and the navbar is "over" the video element, the navbar links stop functioning. I assume this may have something to do with the video element taking precedence over the sticky navbar links. However, if I replace the video element with a box or an image, the navbar links work even when the navbar is over the video. Could someone please try to explain where I'm missing something?
Thanks in advance!
body {
font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
}
nav {
position: -webkit-sticky;
position: sticky;
top: 0.7rem;
background-color: white;
padding: 0.7rem;
border-radius: 5% 5% 5% 5%;
}
nav ul li {
display: inline;
}
nav ul li a {
color: gray;
text-decoration: none;
margin: 2rem;
}
.header-item {
margin-right: 5rem;
margin-left: 0rem;
font-size: 2.5rem;
font-weight: bold;
}
.banner {
padding-top: 2rem;
}
video.banner-video {
border-radius: 0.7rem;
object-fit: fill;
}
.jumbo {
padding-left: 4rem;
padding-right: 4rem;
padding-bottom: 4rem;
}
a.anchor {
position: relative;
top: -8rem;
}
footer {
display: flex;
justify-content: center;
}
<!doctype html>
<html>
<link rel="stylesheet" type="text/css" href="main.css"/>
<head>
<title>Lorem ipsum dolor</title>
</head>
<body>
<nav>
<ul>
<li class="header-item" >Lorem Ipsum</li>
<li>
lorem
</li>
<li>
ipsum
</li>
<li>
dolor
</li>
</ul>
</nav>
<section class="banner">
<video class="banner-video" width="100%" height="320" loop muted autoplay>
<source src="https://player.vimeo.com/external/357105171.sd.mp4?s=58a7816e7bd115bb9c452293741c393a1acb61e8&profile_id=139&oauth2_token_id=57447761" type="video/mp4">
Your browser does not support the video tag.
</video>
</section>
<section class="jumbo">
<a class="anchor" id="header-1"></a>
<h2>lorem</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea invee iste a similique. Voluptatum eum rem incidunt illo nam commodi, ad sit ex alias expedita a voluptas tempore minus veritatis? Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptatem quo alias, porro quaerat veniam dolorum consequuntur cupiditate illo ipsum impedit error ad eveniet iste accusantium excepturi temporibus natus doloribus ratione. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Non dolore alias asperiores amet sequi ipsum enim consequuntur explicabo id, sunt hic voluptate autem molestiae nemo deleniti fugit, distinctio ut vel? Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam repudiandae dolores soluta voluptatibus, odit autem repellat placeat voluptas accusantium nobis, blanditiis tempora, sit minima dolorem impedit aut illum aspernatur? Placeat.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore vero ea, cupiditate, iure culpa fugit quibusdam aliquam iste officiis soluta recusandae deleniti eligendi mollitia molestias, sed explicabo exercitationem reiciendis? Obcaecati. Lorem ipsum dolor sit amet consectetur adipisicing elit. Odio nulla sequi totam voluptatibus cumque dignissimos aliquid blanditiis saepe eius hic? Vel corrupti facere maxime officia aliquam ea, dolorum aperiam odio? Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus voluptas itaque unde ab, culpa reiciendis omnis rerum harum atque ex recusandae excepturi voluptatem reprehenderit enim sit, odio deleniti ipsa ut? Lorem ipsum, dolor sit amet consectetur adipisicing elit. Hic, pariatur voluptates tenetur officiis quam architecto placeat, mollitia aliquid ipsum quidem modi esse libero ullam dolorum minus quisquam sapiente consequuntur ad. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quas quod at aperiam qui repellat voluptatibus officia, cum velit asperiores aspernatur debitis, quam consequuntur perferendis incidunt expedita nulla. Ratione, nemo eius.
</p>
<a class="anchor" id="header-2"></a>
<h2>Ipsum</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea inventore iste a similique. Voluptatum eum rem incidunt illo nam commodi, ad sit ex alias expedita a voluptas tempore minus veritatis? Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptatem quo alias, porro quaerat veniam dolorum consequuntur cupiditate illo ipsum impedit error ad eveniet iste accusantium excepturi temporibus natus doloribus ratione. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Non dolore alias asperiores amet sequi ipsum enim consequuntur explicabo id, sunt hic voluptate autem molestiae nemo deleniti fugit, distinctio ut vel? Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam repudiandae dolores soluta voluptatibus, odit autem repellat placeat voluptas accusantium nobis, blanditiis tempora, sit minima dolorem impedit aut illum aspernatur? Placeat.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore vero ea, cupiditate, iure culpa fugit quibusdam aliquam iste officiis soluta recusandae deleniti eligendi mollitia molestias, sed explicabo exercitationem reiciendis? Obcaecati. Lorem ipsum dolor sit amet consectetur adipisicing elit. Odio nulla sequi totam voluptatibus cumque dignissimos aliquid blanditiis saepe eius hic? Vel corrupti facere maxime officia aliquam ea, dolorum aperiam odio? Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus voluptas itaque unde ab, culpa reiciendis omnis rerum harum atque ex recusandae excepturi voluptatem reprehenderit enim sit, odio deleniti ipsa ut? Lorem ipsum, dolor sit amet consectetur adipisicing elit. Hic, pariatur voluptates tenetur officiis quam architecto placeat, mollitia aliquid ipsum quidem modi esse libero ullam dolorum minus quisquam sapiente consequuntur ad. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quas quod at aperiam qui repellat voluptatibus officia, cum velit asperiores aspernatur debitis, quam consequuntur perferendis incidunt expedita nulla. Ratione, nemo eius.
</p>
<a class="anchor" id="header-3"></a>
<h2>Dolor</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea inventore iste a similique. Voluptatum eum rem incidunt illo nam commodi, ad sit ex alias expedita a voluptas tempore minus veritatis? Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptatem quo alias, porro quaerat veniam dolorum consequuntur cupiditate illo ipsum impedit error ad eveniet iste accusantium excepturi temporibus natus doloribus ratione. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Non dolore alias asperiores amet sequi ipsum enim consequuntur explicabo id, sunt hic voluptate autem molestiae nemo deleniti fugit, distinctio ut vel? Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam repudiandae dolores soluta voluptatibus, odit autem repellat placeat voluptas accusantium nobis, blanditiis tempora, sit minima dolorem impedit aut illum aspernatur? Placeat.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore vero ea, cupiditate, iure culpa fugit quibusdam aliquam iste officiis soluta recusandae deleniti eligendi mollitia molestias, sed explicabo exercitationem reiciendis? Obcaecati. Lorem ipsum dolor sit amet consectetur adipisicing elit. Odio nulla sequi totam voluptatibus cumque dignissimos aliquid blanditiis saepe eius hic? Vel corrupti facere maxime officia aliquam ea, dolorum aperiam odio? Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus voluptas itaque unde ab, culpa reiciendis omnis rerum harum atque ex recusandae excepturi voluptatem reprehenderit enim sit, odio deleniti ipsa ut? Lorem ipsum, dolor sit amet consectetur adipisicing elit. Hic, pariatur voluptates tenetur officiis quam architecto placeat, mollitia aliquid ipsum quidem modi esse libero ullam dolorum minus quisquam sapiente consequuntur ad. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quas quod at aperiam qui repellat voluptatibus officia, cum velit asperiores aspernatur debitis, quam consequuntur perferendis incidunt expedita nulla. Ratione, nemo eius.
</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea inventore iste a similique. Voluptatum eum rem incidunt illo nam commodi, ad sit ex alias expedita a voluptas tempore minus veritatis? Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptatem quo alias, porro quaerat veniam dolorum consequuntur cupiditate illo ipsum impedit error ad eveniet iste accusantium excepturi temporibus natus doloribus ratione. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Non dolore alias asperiores amet sequi ipsum enim consequuntur explicabo id, sunt hic voluptate autem molestiae nemo deleniti fugit, distinctio ut vel? Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam repudiandae dolores soluta voluptatibus, odit autem repellat placeat voluptas accusantium nobis, blanditiis tempora, sit minima dolorem impedit aut illum aspernatur? Placeat.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore vero ea, cupiditate, iure culpa fugit quibusdam aliquam iste officiis soluta recusandae deleniti eligendi mollitia molestias, sed explicabo exercitationem reiciendis? Obcaecati. Lorem ipsum dolor sit amet consectetur adipisicing elit. Odio nulla sequi totam voluptatibus cumque dignissimos aliquid blanditiis saepe eius hic? Vel corrupti facere maxime officia aliquam ea, dolorum aperiam odio? Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus voluptas itaque unde ab, culpa reiciendis omnis rerum harum atque ex recusandae excepturi voluptatem reprehenderit enim sit, odio deleniti ipsa ut? Lorem ipsum, dolor sit amet consectetur adipisicing elit. Hic, pariatur voluptates tenetur officiis quam architecto placeat, mollitia aliquid ipsum quidem modi esse libero ullam dolorum minus quisquam sapiente consequuntur ad. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quas quod at aperiam qui repellat voluptatibus officia, cum velit asperiores aspernatur debitis, quam consequuntur perferendis incidunt expedita nulla. Ratione, nemo eius.
</p>
</section>
<footer>
<div>
<p>© 2020 cybele</p>
</div>
</footer>
</body>
</html>

Yes you are right, I forgot Firefox reads this properly almost always without z-index declared. Other including Chrome and Safari do not. You need z-index CSS property.
Just add z-index: 99; for example to your nav element so it will be allways on top of everything.
Also take note z-index does not work on elements that do not have position declared. . Read more about it here
body {
font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
}
nav {
position: -webkit-sticky;
position: sticky;
top: 0.7rem;
background-color: white;
padding: 0.7rem;
border-radius: 5% 5% 5% 5%;
z-index: 99;
}
nav ul li {
display: inline;
}
nav ul li a {
color: gray;
text-decoration: none;
margin: 2rem;
}
.header-item {
margin-right: 5rem;
margin-left: 0rem;
font-size: 2.5rem;
font-weight: bold;
}
.banner {
padding-top: 2rem;
}
video.banner-video {
border-radius: 0.7rem;
object-fit: fill;
}
.jumbo {
padding-left: 4rem;
padding-right: 4rem;
padding-bottom: 4rem;
}
a.anchor {
position: relative;
top: -8rem;
}
footer {
display: flex;
justify-content: center;
}
<!doctype html>
<html>
<link rel="stylesheet" type="text/css" href="main.css"/>
<head>
<title>Lorem ipsum dolor</title>
</head>
<body>
<nav>
<ul>
<li class="header-item" >Lorem Ipsum</li>
<li>
lorem
</li>
<li>
ipsum
</li>
<li>
dolor
</li>
</ul>
</nav>
<section class="banner">
<video class="banner-video" width="100%" height="320" loop muted autoplay>
<source src="https://player.vimeo.com/external/357105171.sd.mp4?s=58a7816e7bd115bb9c452293741c393a1acb61e8&profile_id=139&oauth2_token_id=57447761" type="video/mp4">
Your browser does not support the video tag.
</video>
</section>
<section class="jumbo">
<a class="anchor" id="header-1"></a>
<h2>lorem</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea invee iste a similique. Voluptatum eum rem incidunt illo nam commodi, ad sit ex alias expedita a voluptas tempore minus veritatis? Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptatem quo alias, porro quaerat veniam dolorum consequuntur cupiditate illo ipsum impedit error ad eveniet iste accusantium excepturi temporibus natus doloribus ratione. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Non dolore alias asperiores amet sequi ipsum enim consequuntur explicabo id, sunt hic voluptate autem molestiae nemo deleniti fugit, distinctio ut vel? Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam repudiandae dolores soluta voluptatibus, odit autem repellat placeat voluptas accusantium nobis, blanditiis tempora, sit minima dolorem impedit aut illum aspernatur? Placeat.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore vero ea, cupiditate, iure culpa fugit quibusdam aliquam iste officiis soluta recusandae deleniti eligendi mollitia molestias, sed explicabo exercitationem reiciendis? Obcaecati. Lorem ipsum dolor sit amet consectetur adipisicing elit. Odio nulla sequi totam voluptatibus cumque dignissimos aliquid blanditiis saepe eius hic? Vel corrupti facere maxime officia aliquam ea, dolorum aperiam odio? Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus voluptas itaque unde ab, culpa reiciendis omnis rerum harum atque ex recusandae excepturi voluptatem reprehenderit enim sit, odio deleniti ipsa ut? Lorem ipsum, dolor sit amet consectetur adipisicing elit. Hic, pariatur voluptates tenetur officiis quam architecto placeat, mollitia aliquid ipsum quidem modi esse libero ullam dolorum minus quisquam sapiente consequuntur ad. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quas quod at aperiam qui repellat voluptatibus officia, cum velit asperiores aspernatur debitis, quam consequuntur perferendis incidunt expedita nulla. Ratione, nemo eius.
</p>
<a class="anchor" id="header-2"></a>
<h2>Ipsum</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea inventore iste a similique. Voluptatum eum rem incidunt illo nam commodi, ad sit ex alias expedita a voluptas tempore minus veritatis? Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptatem quo alias, porro quaerat veniam dolorum consequuntur cupiditate illo ipsum impedit error ad eveniet iste accusantium excepturi temporibus natus doloribus ratione. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Non dolore alias asperiores amet sequi ipsum enim consequuntur explicabo id, sunt hic voluptate autem molestiae nemo deleniti fugit, distinctio ut vel? Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam repudiandae dolores soluta voluptatibus, odit autem repellat placeat voluptas accusantium nobis, blanditiis tempora, sit minima dolorem impedit aut illum aspernatur? Placeat.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore vero ea, cupiditate, iure culpa fugit quibusdam aliquam iste officiis soluta recusandae deleniti eligendi mollitia molestias, sed explicabo exercitationem reiciendis? Obcaecati. Lorem ipsum dolor sit amet consectetur adipisicing elit. Odio nulla sequi totam voluptatibus cumque dignissimos aliquid blanditiis saepe eius hic? Vel corrupti facere maxime officia aliquam ea, dolorum aperiam odio? Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus voluptas itaque unde ab, culpa reiciendis omnis rerum harum atque ex recusandae excepturi voluptatem reprehenderit enim sit, odio deleniti ipsa ut? Lorem ipsum, dolor sit amet consectetur adipisicing elit. Hic, pariatur voluptates tenetur officiis quam architecto placeat, mollitia aliquid ipsum quidem modi esse libero ullam dolorum minus quisquam sapiente consequuntur ad. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quas quod at aperiam qui repellat voluptatibus officia, cum velit asperiores aspernatur debitis, quam consequuntur perferendis incidunt expedita nulla. Ratione, nemo eius.
</p>
<a class="anchor" id="header-3"></a>
<h2>Dolor</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea inventore iste a similique. Voluptatum eum rem incidunt illo nam commodi, ad sit ex alias expedita a voluptas tempore minus veritatis? Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptatem quo alias, porro quaerat veniam dolorum consequuntur cupiditate illo ipsum impedit error ad eveniet iste accusantium excepturi temporibus natus doloribus ratione. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Non dolore alias asperiores amet sequi ipsum enim consequuntur explicabo id, sunt hic voluptate autem molestiae nemo deleniti fugit, distinctio ut vel? Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam repudiandae dolores soluta voluptatibus, odit autem repellat placeat voluptas accusantium nobis, blanditiis tempora, sit minima dolorem impedit aut illum aspernatur? Placeat.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore vero ea, cupiditate, iure culpa fugit quibusdam aliquam iste officiis soluta recusandae deleniti eligendi mollitia molestias, sed explicabo exercitationem reiciendis? Obcaecati. Lorem ipsum dolor sit amet consectetur adipisicing elit. Odio nulla sequi totam voluptatibus cumque dignissimos aliquid blanditiis saepe eius hic? Vel corrupti facere maxime officia aliquam ea, dolorum aperiam odio? Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus voluptas itaque unde ab, culpa reiciendis omnis rerum harum atque ex recusandae excepturi voluptatem reprehenderit enim sit, odio deleniti ipsa ut? Lorem ipsum, dolor sit amet consectetur adipisicing elit. Hic, pariatur voluptates tenetur officiis quam architecto placeat, mollitia aliquid ipsum quidem modi esse libero ullam dolorum minus quisquam sapiente consequuntur ad. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quas quod at aperiam qui repellat voluptatibus officia, cum velit asperiores aspernatur debitis, quam consequuntur perferendis incidunt expedita nulla. Ratione, nemo eius.
</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea inventore iste a similique. Voluptatum eum rem incidunt illo nam commodi, ad sit ex alias expedita a voluptas tempore minus veritatis? Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptatem quo alias, porro quaerat veniam dolorum consequuntur cupiditate illo ipsum impedit error ad eveniet iste accusantium excepturi temporibus natus doloribus ratione. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Non dolore alias asperiores amet sequi ipsum enim consequuntur explicabo id, sunt hic voluptate autem molestiae nemo deleniti fugit, distinctio ut vel? Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam repudiandae dolores soluta voluptatibus, odit autem repellat placeat voluptas accusantium nobis, blanditiis tempora, sit minima dolorem impedit aut illum aspernatur? Placeat.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore vero ea, cupiditate, iure culpa fugit quibusdam aliquam iste officiis soluta recusandae deleniti eligendi mollitia molestias, sed explicabo exercitationem reiciendis? Obcaecati. Lorem ipsum dolor sit amet consectetur adipisicing elit. Odio nulla sequi totam voluptatibus cumque dignissimos aliquid blanditiis saepe eius hic? Vel corrupti facere maxime officia aliquam ea, dolorum aperiam odio? Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus voluptas itaque unde ab, culpa reiciendis omnis rerum harum atque ex recusandae excepturi voluptatem reprehenderit enim sit, odio deleniti ipsa ut? Lorem ipsum, dolor sit amet consectetur adipisicing elit. Hic, pariatur voluptates tenetur officiis quam architecto placeat, mollitia aliquid ipsum quidem modi esse libero ullam dolorum minus quisquam sapiente consequuntur ad. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quas quod at aperiam qui repellat voluptatibus officia, cum velit asperiores aspernatur debitis, quam consequuntur perferendis incidunt expedita nulla. Ratione, nemo eius.
</p>
</section>
<footer>
<div>
<p>© 2020 cybele</p>
</div>
</footer>
</body>
</html>

You can do it by adding a position to your banner and a -1 z-index like this
.banner {
padding-top: 2rem;
z-index:-1;
position: relative;
}
Here's it working
body {
font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
}
nav {
position: -webkit-sticky;
position: sticky;
top: 0.7rem;
background-color: white;
padding: 0.7rem;
border-radius: 5% 5% 5% 5%;
}
nav ul li {
display: inline;
}
nav ul li a {
color: gray;
text-decoration: none;
margin: 2rem;
}
.header-item {
margin-right: 5rem;
margin-left: 0rem;
font-size: 2.5rem;
font-weight: bold;
}
.banner {
padding-top: 2rem;
position: relative;
z-index: -1;
}
video.banner-video {
border-radius: 0.7rem;
object-fit: fill;
}
.jumbo {
padding-left: 4rem;
padding-right: 4rem;
padding-bottom: 4rem;
}
a.anchor {
position: relative;
top: -8rem;
}
footer {
display: flex;
justify-content: center;
}
<!doctype html>
<html>
<link rel="stylesheet" type="text/css" href="main.css"/>
<head>
<title>Lorem ipsum dolor</title>
</head>
<body>
<nav>
<ul>
<li class="header-item" >Lorem Ipsum</li>
<li>
lorem
</li>
<li>
ipsum
</li>
<li>
dolor
</li>
</ul>
</nav>
<section class="banner">
<video class="banner-video" width="100%" height="320" loop muted autoplay>
<source src="https://player.vimeo.com/external/357105171.sd.mp4?s=58a7816e7bd115bb9c452293741c393a1acb61e8&profile_id=139&oauth2_token_id=57447761" type="video/mp4">
Your browser does not support the video tag.
</video>
</section>
<section class="jumbo">
<a class="anchor" id="header-1"></a>
<h2>lorem</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea invee iste a similique. Voluptatum eum rem incidunt illo nam commodi, ad sit ex alias expedita a voluptas tempore minus veritatis? Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptatem quo alias, porro quaerat veniam dolorum consequuntur cupiditate illo ipsum impedit error ad eveniet iste accusantium excepturi temporibus natus doloribus ratione. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Non dolore alias asperiores amet sequi ipsum enim consequuntur explicabo id, sunt hic voluptate autem molestiae nemo deleniti fugit, distinctio ut vel? Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam repudiandae dolores soluta voluptatibus, odit autem repellat placeat voluptas accusantium nobis, blanditiis tempora, sit minima dolorem impedit aut illum aspernatur? Placeat.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore vero ea, cupiditate, iure culpa fugit quibusdam aliquam iste officiis soluta recusandae deleniti eligendi mollitia molestias, sed explicabo exercitationem reiciendis? Obcaecati. Lorem ipsum dolor sit amet consectetur adipisicing elit. Odio nulla sequi totam voluptatibus cumque dignissimos aliquid blanditiis saepe eius hic? Vel corrupti facere maxime officia aliquam ea, dolorum aperiam odio? Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus voluptas itaque unde ab, culpa reiciendis omnis rerum harum atque ex recusandae excepturi voluptatem reprehenderit enim sit, odio deleniti ipsa ut? Lorem ipsum, dolor sit amet consectetur adipisicing elit. Hic, pariatur voluptates tenetur officiis quam architecto placeat, mollitia aliquid ipsum quidem modi esse libero ullam dolorum minus quisquam sapiente consequuntur ad. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quas quod at aperiam qui repellat voluptatibus officia, cum velit asperiores aspernatur debitis, quam consequuntur perferendis incidunt expedita nulla. Ratione, nemo eius.
</p>
<a class="anchor" id="header-2"></a>
<h2>Ipsum</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea inventore iste a similique. Voluptatum eum rem incidunt illo nam commodi, ad sit ex alias expedita a voluptas tempore minus veritatis? Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptatem quo alias, porro quaerat veniam dolorum consequuntur cupiditate illo ipsum impedit error ad eveniet iste accusantium excepturi temporibus natus doloribus ratione. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Non dolore alias asperiores amet sequi ipsum enim consequuntur explicabo id, sunt hic voluptate autem molestiae nemo deleniti fugit, distinctio ut vel? Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam repudiandae dolores soluta voluptatibus, odit autem repellat placeat voluptas accusantium nobis, blanditiis tempora, sit minima dolorem impedit aut illum aspernatur? Placeat.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore vero ea, cupiditate, iure culpa fugit quibusdam aliquam iste officiis soluta recusandae deleniti eligendi mollitia molestias, sed explicabo exercitationem reiciendis? Obcaecati. Lorem ipsum dolor sit amet consectetur adipisicing elit. Odio nulla sequi totam voluptatibus cumque dignissimos aliquid blanditiis saepe eius hic? Vel corrupti facere maxime officia aliquam ea, dolorum aperiam odio? Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus voluptas itaque unde ab, culpa reiciendis omnis rerum harum atque ex recusandae excepturi voluptatem reprehenderit enim sit, odio deleniti ipsa ut? Lorem ipsum, dolor sit amet consectetur adipisicing elit. Hic, pariatur voluptates tenetur officiis quam architecto placeat, mollitia aliquid ipsum quidem modi esse libero ullam dolorum minus quisquam sapiente consequuntur ad. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quas quod at aperiam qui repellat voluptatibus officia, cum velit asperiores aspernatur debitis, quam consequuntur perferendis incidunt expedita nulla. Ratione, nemo eius.
</p>
<a class="anchor" id="header-3"></a>
<h2>Dolor</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea inventore iste a similique. Voluptatum eum rem incidunt illo nam commodi, ad sit ex alias expedita a voluptas tempore minus veritatis? Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptatem quo alias, porro quaerat veniam dolorum consequuntur cupiditate illo ipsum impedit error ad eveniet iste accusantium excepturi temporibus natus doloribus ratione. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Non dolore alias asperiores amet sequi ipsum enim consequuntur explicabo id, sunt hic voluptate autem molestiae nemo deleniti fugit, distinctio ut vel? Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam repudiandae dolores soluta voluptatibus, odit autem repellat placeat voluptas accusantium nobis, blanditiis tempora, sit minima dolorem impedit aut illum aspernatur? Placeat.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore vero ea, cupiditate, iure culpa fugit quibusdam aliquam iste officiis soluta recusandae deleniti eligendi mollitia molestias, sed explicabo exercitationem reiciendis? Obcaecati. Lorem ipsum dolor sit amet consectetur adipisicing elit. Odio nulla sequi totam voluptatibus cumque dignissimos aliquid blanditiis saepe eius hic? Vel corrupti facere maxime officia aliquam ea, dolorum aperiam odio? Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus voluptas itaque unde ab, culpa reiciendis omnis rerum harum atque ex recusandae excepturi voluptatem reprehenderit enim sit, odio deleniti ipsa ut? Lorem ipsum, dolor sit amet consectetur adipisicing elit. Hic, pariatur voluptates tenetur officiis quam architecto placeat, mollitia aliquid ipsum quidem modi esse libero ullam dolorum minus quisquam sapiente consequuntur ad. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quas quod at aperiam qui repellat voluptatibus officia, cum velit asperiores aspernatur debitis, quam consequuntur perferendis incidunt expedita nulla. Ratione, nemo eius.
</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea inventore iste a similique. Voluptatum eum rem incidunt illo nam commodi, ad sit ex alias expedita a voluptas tempore minus veritatis? Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptatem quo alias, porro quaerat veniam dolorum consequuntur cupiditate illo ipsum impedit error ad eveniet iste accusantium excepturi temporibus natus doloribus ratione. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Non dolore alias asperiores amet sequi ipsum enim consequuntur explicabo id, sunt hic voluptate autem molestiae nemo deleniti fugit, distinctio ut vel? Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam repudiandae dolores soluta voluptatibus, odit autem repellat placeat voluptas accusantium nobis, blanditiis tempora, sit minima dolorem impedit aut illum aspernatur? Placeat.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore vero ea, cupiditate, iure culpa fugit quibusdam aliquam iste officiis soluta recusandae deleniti eligendi mollitia molestias, sed explicabo exercitationem reiciendis? Obcaecati. Lorem ipsum dolor sit amet consectetur adipisicing elit. Odio nulla sequi totam voluptatibus cumque dignissimos aliquid blanditiis saepe eius hic? Vel corrupti facere maxime officia aliquam ea, dolorum aperiam odio? Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus voluptas itaque unde ab, culpa reiciendis omnis rerum harum atque ex recusandae excepturi voluptatem reprehenderit enim sit, odio deleniti ipsa ut? Lorem ipsum, dolor sit amet consectetur adipisicing elit. Hic, pariatur voluptates tenetur officiis quam architecto placeat, mollitia aliquid ipsum quidem modi esse libero ullam dolorum minus quisquam sapiente consequuntur ad. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quas quod at aperiam qui repellat voluptatibus officia, cum velit asperiores aspernatur debitis, quam consequuntur perferendis incidunt expedita nulla. Ratione, nemo eius.
</p>
</section>
<footer>
<div>
<p>© 2020 cybele</p>
</div>
</footer>
</body>
</html>

Fixed sidebar next to a centered blogpost

for a page with a lot of text, readers should be able to navigate between sections with ease. As such I want to present an Index on the left-hand side of the main text that is permanently visible. The main text should be centered and should fill about 75% of the screen.
I have been messing around for a few hours but I just can't seem to get it right. Either the columns are overlapping, or there is white-space between them and won't center nicely.
HTML
<div class="wrapper">
<div class="row">
<!-- Sidebar -->
<nav id="sidebar">
<ul> Content
<li>Guidelines </li>
<li>Geographic Focus </li>
<li>Fields of Interest </li>
</ul>
</nav>
<div id="content">
<div id="blog">
</div>
</div>
</div>
</div>
CSS
.wrapper .row {
display: flex;
border-style:solid;
width:100%;
justify-content:center;
align-content: center;
align-self:center;
}
#sidebar {
position: fixed;
display:flex;
border-style:solid;
min-height:100vh;
color:black;
flex-direction:column;
padding-top:70px;
width: auto;
}
#blog {
float: left;
width:75%;
padding:0;
border-style:solid;
margin: auto;
display: flex;
flex-direction: column;
align-items: center;
}

Updated based on comment
In addition to grid, use flexbox to move the navigation towards the content
Original answer
You could create this layout using CSS Grid. Example:
.wrapper {
display: grid;
grid-template-columns: 25% 75%;
}
#sidebar {
display: flex;
justify-content: flex-end;
}
#sidebar ul {
position: fixed;
display: grid;
align-content: center;
height: 100%;
max-width: 25%;
padding: 0;
}
<div class="wrapper">
<nav id="sidebar">
<ul> Content
<li>Guidelines </li>
<li>Geographic Focus </li>
<li>Fields of Interest </li>
</ul>
</nav>
<div id="content">
<div id="blog">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore praesentium sit, magnam voluptate pariatur harum veniam nostrum explicabo quibusdam mollitia vel blanditiis qui, voluptates totam, alias rerum sequi, eveniet. Iusto.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore praesentium sit, magnam voluptate pariatur harum veniam nostrum explicabo quibusdam mollitia vel blanditiis qui, voluptates totam, alias rerum sequi, eveniet. Iusto.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore praesentium sit, magnam voluptate pariatur harum veniam nostrum explicabo quibusdam mollitia vel blanditiis qui, voluptates totam, alias rerum sequi, eveniet. Iusto.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore praesentium sit, magnam voluptate pariatur harum veniam nostrum explicabo quibusdam mollitia vel blanditiis qui, voluptates totam, alias rerum sequi, eveniet. Iusto.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore praesentium sit, magnam voluptate pariatur harum veniam nostrum explicabo quibusdam mollitia vel blanditiis qui, voluptates totam, alias rerum sequi, eveniet. Iusto.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore praesentium sit, magnam voluptate pariatur harum veniam nostrum explicabo quibusdam mollitia vel blanditiis qui, voluptates totam, alias rerum sequi, eveniet. Iusto.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore praesentium sit, magnam voluptate pariatur harum veniam nostrum explicabo quibusdam mollitia vel blanditiis qui, voluptates totam, alias rerum sequi, eveniet. Iusto.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore praesentium sit, magnam voluptate pariatur harum veniam nostrum explicabo quibusdam mollitia vel blanditiis qui, voluptates totam, alias rerum sequi, eveniet. Iusto.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore praesentium sit, magnam voluptate pariatur harum veniam nostrum explicabo quibusdam mollitia vel blanditiis qui, voluptates totam, alias rerum sequi, eveniet. Iusto.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore praesentium sit, magnam voluptate pariatur harum veniam nostrum explicabo quibusdam mollitia vel blanditiis qui, voluptates totam, alias rerum sequi, eveniet. Iusto.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore praesentium sit, magnam voluptate pariatur harum veniam nostrum explicabo quibusdam mollitia vel blanditiis qui, voluptates totam, alias rerum sequi, eveniet. Iusto.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore praesentium sit, magnam voluptate pariatur harum veniam nostrum explicabo quibusdam mollitia vel blanditiis qui, voluptates totam, alias rerum sequi, eveniet. Iusto.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore praesentium sit, magnam voluptate pariatur harum veniam nostrum explicabo quibusdam mollitia vel blanditiis qui, voluptates totam, alias rerum sequi, eveniet. Iusto.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore praesentium sit, magnam voluptate pariatur harum veniam nostrum explicabo quibusdam mollitia vel blanditiis qui, voluptates totam, alias rerum sequi, eveniet. Iusto.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore praesentium sit, magnam voluptate pariatur harum veniam nostrum explicabo quibusdam mollitia vel blanditiis qui, voluptates totam, alias rerum sequi, eveniet. Iusto.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore praesentium sit, magnam voluptate pariatur harum veniam nostrum explicabo quibusdam mollitia vel blanditiis qui, voluptates totam, alias rerum sequi, eveniet. Iusto.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore praesentium sit, magnam voluptate pariatur harum veniam nostrum explicabo quibusdam mollitia vel blanditiis qui, voluptates totam, alias rerum sequi, eveniet. Iusto.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore praesentium sit, magnam voluptate pariatur harum veniam nostrum explicabo quibusdam mollitia vel blanditiis qui, voluptates totam, alias rerum sequi, eveniet. Iusto.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore praesentium sit, magnam voluptate pariatur harum veniam nostrum explicabo quibusdam mollitia vel blanditiis qui, voluptates totam, alias rerum sequi, eveniet. Iusto.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore praesentium sit, magnam voluptate pariatur harum veniam nostrum explicabo quibusdam mollitia vel blanditiis qui, voluptates totam, alias rerum sequi, eveniet. Iusto.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore praesentium sit, magnam voluptate pariatur harum veniam nostrum explicabo quibusdam mollitia vel blanditiis qui, voluptates totam, alias rerum sequi, eveniet. Iusto.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore praesentium sit, magnam voluptate pariatur harum veniam nostrum explicabo quibusdam mollitia vel blanditiis qui, voluptates totam, alias rerum sequi, eveniet. Iusto.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore praesentium sit, magnam voluptate pariatur harum veniam nostrum explicabo quibusdam mollitia vel blanditiis qui, voluptates totam, alias rerum sequi, eveniet. Iusto.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore praesentium sit, magnam voluptate pariatur harum veniam nostrum explicabo quibusdam mollitia vel blanditiis qui, voluptates totam, alias rerum sequi, eveniet. Iusto.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore praesentium sit, magnam voluptate pariatur harum veniam nostrum explicabo quibusdam mollitia vel blanditiis qui, voluptates totam, alias rerum sequi, eveniet. Iusto.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore praesentium sit, magnam voluptate pariatur harum veniam nostrum explicabo quibusdam mollitia vel blanditiis qui, voluptates totam, alias rerum sequi, eveniet. Iusto.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore praesentium sit, magnam voluptate pariatur harum veniam nostrum explicabo quibusdam mollitia vel blanditiis qui, voluptates totam, alias rerum sequi, eveniet. Iusto.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore praesentium sit, magnam voluptate pariatur harum veniam nostrum explicabo quibusdam mollitia vel blanditiis qui, voluptates totam, alias rerum sequi, eveniet. Iusto.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore praesentium sit, magnam voluptate pariatur harum veniam nostrum explicabo quibusdam mollitia vel blanditiis qui, voluptates totam, alias rerum sequi, eveniet. Iusto.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore praesentium sit, magnam voluptate pariatur harum veniam nostrum explicabo quibusdam mollitia vel blanditiis qui, voluptates totam, alias rerum sequi, eveniet. Iusto.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore praesentium sit, magnam voluptate pariatur harum veniam nostrum explicabo quibusdam mollitia vel blanditiis qui, voluptates totam, alias rerum sequi, eveniet. Iusto.</p>
</div>
</div>
</div>

The snippet below gives you an initial shot with minimal changes to your original code.
Still there might be better ideas. This idea places a fixed block, as requested, with 25% width and ensures, that the main content respects this 25% as a left-margin.
<html>
<head>
<style type="text/css">
#sidebar {
background: red; /* for visual testing */
position: fixed;
min-height:100vh;
padding-top:70px;
width: 25%;
}
#blog {
background: blue; /* for visual testing */
width:75%;
margin-left: 25%;
text-align: center;
}
</style>
</head>
<body>
<!-- Sidebar -->
<div id="sidebar">
<ul> Content
<li>Guidelines </li>
<li>Geographic Focus </li>
<li>Fields of Interest </li>
</ul>
</div>
<div id="content">
<div id="blog">
Test text.
</div>
</div>
</body>
</html>

Remove the fixed position and add this to your #sidebar
#sidebar {
position: -webkit-sticky;
position: sticky;
top: 21px;
}
Don't forget to override the sticky position on small screens :)

Flexbox wrap issue - Aligning two scrollable divs next to each other in a container of height 100vh

I want the following flex box layout to:
Have individual scrolling for the Sidebar and the Content area when the content in them overflows
Content area to appear next to the sidebar
Height of the main container to remain 100vh and neither the sidebar or the content area should exceed this.
The alert is for alerting users about issues. It should be on top and should occupy 100% of the width.
The user can choose to use the sidebar. If the sidebar is not used, content occupies 100% width. The alert will also only appear when something is wrong. If not then alert will not be shown
I am not sure why the content area appears below the sidebar and the sidebar and the content areas don't activate scrolling even after they overflow. You can see that the height of the sidebar exceeds the height of the main container (the background color of the main area is cyan).
.main {
display: flex;
flex-wrap: wrap;
height: 100vh;
background: cyan;
}
.main .alert {
flex: 1 1 100%;
background: yellow;
height: 30px;
order: -2;
}
.main .content {
flex: 1 1 auto;
background: blue;
overflow-y: auto;
}
.main .sidebar {
flex: 0 0 auto;
width: 200px;
background: red;
overflow-y: auto;
order: -1;
}
<div class="main">
<div class="alert">
Hello
</div>
<div class="content">
Content.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt corrupti, nulla fugiat recusandae quae necessitatibus voluptatem dicta ut numquam libero tenetur consequatur esse, minima assumenda eum debitis amet quia reiciendis?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius veniam magni quasi ad sunt qui voluptatum repellat officia deleniti eos obcaecati optio pariatur nesciunt non vitae earum a, rem eligendi.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt corrupti, nulla fugiat recusandae quae necessitatibus voluptatem dicta ut numquam libero tenetur consequatur esse, minima assumenda eum debitis amet quia reiciendis?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius veniam magni quasi ad sunt qui voluptatum repellat officia deleniti eos obcaecati optio pariatur nesciunt non vitae earum a, rem eligendi.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt corrupti, nulla fugiat recusandae quae necessitatibus voluptatem dicta ut numquam libero tenetur consequatur esse, minima assumenda eum debitis amet quia reiciendis?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius veniam magni quasi ad sunt qui voluptatum repellat officia deleniti eos obcaecati optio pariatur nesciunt non vitae earum a, rem eligendi.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt corrupti, nulla fugiat recusandae quae necessitatibus voluptatem dicta ut numquam libero tenetur consequatur esse, minima assumenda eum debitis amet quia reiciendis?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius veniam magni quasi ad sunt qui voluptatum repellat officia deleniti eos obcaecati optio pariatur nesciunt non vitae earum a, rem eligendi.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae explicabo, eum voluptas distinctio quidem, voluptate repudiandae ad aliquam praesentium fuga tempora magni natus necessitatibus consectetur minima maxime, placeat consequatur optio.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos error animi consequatur doloribus maiores in delectus esse illo fugit quod distinctio, voluptatem omnis earum voluptate corporis facere ea enim laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo maxime sit ab blanditiis eum, consequatur aspernatur odio nobis fuga, sed ratione dignissimos dolores nulla ea eaque. Officia, dolore harum nemo.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque iste impedit, tenetur libero earum, rerum sit, voluptates, similique perferendis magnam voluptatem optio saepe perspiciatis. Doloribus excepturi iure, hic quasi architecto.
</div>
<div class="sidebar">
Sidebar
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus, at odit accusantium, maiores doloremque placeat doloribus repellat optio magnam suscipit eius libero tempore, iure, voluptatum facere ut saepe nam. Debitis.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga facere enim quas vero quisquam possimus eius cum nisi adipisci, non ipsam architecto explicabo. Quis dolor cum earum quas consequuntur, maiores!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt corrupti, nulla fugiat recusandae quae necessitatibus voluptatem dicta ut numquam libero tenetur consequatur esse, minima assumenda eum debitis amet quia reiciendis?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius veniam magni quasi ad sunt qui voluptatum repellat officia deleniti eos obcaecati optio pariatur nesciunt non vitae earum a, rem eligendi.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt corrupti, nulla fugiat recusandae quae necessitatibus voluptatem dicta ut numquam libero tenetur consequatur esse, minima assumenda eum debitis amet quia reiciendis?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius veniam magni quasi ad sunt qui voluptatum repellat officia deleniti eos obcaecati optio pariatur nesciunt non vitae earum a, rem eligendi.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt corrupti, nulla fugiat recusandae quae necessitatibus voluptatem dicta ut numquam libero tenetur consequatur esse, minima assumenda eum debitis amet quia reiciendis?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius veniam magni quasi ad sunt qui voluptatum repellat officia deleniti eos obcaecati optio pariatur nesciunt non vitae earum a, rem eligendi.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt corrupti, nulla fugiat recusandae quae necessitatibus voluptatem dicta ut numquam libero tenetur consequatur esse, minima assumenda eum debitis amet quia reiciendis?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius veniam magni quasi ad sunt qui voluptatum repellat officia deleniti eos obcaecati optio pariatur nesciunt non vitae earum a, rem eligendi.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga quis provident quo, vel nesciunt deserunt vitae quae nulla, mollitia, assumenda et tenetur illum exercitationem numquam! Distinctio sapiente maxime, ullam expedita.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia aliquid numquam, officiis accusamus dolor commodi quae soluta reprehenderit iusto laboriosam nostrum, natus vel impedit, enim inventore, consectetur harum deleniti consequuntur!
</div>
</div>

Method #1: flex-direction:column and nested flex container
body {
margin: 0;
}
.main {
display: flex;
flex-direction: column;
height: 100vh;
background: cyan;
}
.main .alert {
flex: 1 1 30px;
background: yellow;
}
.inner-flex-container {
display: flex;
}
.inner-flex-container .content {
flex: 1 1 auto;
background: blue;
overflow-y: auto;
}
.inner-flex-container .sidebar {
flex: 0 0 200px;
background: red;
overflow-y: auto;
order: -1;
}
<div class="main">
<div class="alert">
Hello
</div>
<div class="inner-flex-container">
<div class="content">
Content. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt corrupti, nulla fugiat recusandae quae necessitatibus voluptatem dicta ut numquam libero tenetur consequatur esse, minima assumenda eum debitis amet quia reiciendis? Lorem ipsum
dolor sit amet, consectetur adipisicing elit. Eius veniam magni quasi ad sunt qui voluptatum repellat officia deleniti eos obcaecati optio pariatur nesciunt non vitae earum a, rem eligendi. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Incidunt corrupti, nulla fugiat recusandae quae necessitatibus voluptatem dicta ut numquam libero tenetur consequatur esse, minima assumenda eum debitis amet quia reiciendis? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius veniam
magni quasi ad sunt qui voluptatum repellat officia deleniti eos obcaecati optio pariatur nesciunt non vitae earum a, rem eligendi. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt corrupti, nulla fugiat recusandae quae necessitatibus
voluptatem dicta ut numquam libero tenetur consequatur esse, minima assumenda eum debitis amet quia reiciendis? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius veniam magni quasi ad sunt qui voluptatum repellat officia deleniti eos
obcaecati optio pariatur nesciunt non vitae earum a, rem eligendi. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt corrupti, nulla fugiat recusandae quae necessitatibus voluptatem dicta ut numquam libero tenetur consequatur esse,
minima assumenda eum debitis amet quia reiciendis? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius veniam magni quasi ad sunt qui voluptatum repellat officia deleniti eos obcaecati optio pariatur nesciunt non vitae earum a, rem eligendi.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae explicabo, eum voluptas distinctio quidem, voluptate repudiandae ad aliquam praesentium fuga tempora magni natus necessitatibus consectetur minima maxime, placeat consequatur optio.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos error animi consequatur doloribus maiores in delectus esse illo fugit quod distinctio, voluptatem omnis earum voluptate corporis facere ea enim laborum. Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Quo maxime sit ab blanditiis eum, consequatur aspernatur odio nobis fuga, sed ratione dignissimos dolores nulla ea eaque. Officia, dolore harum nemo. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque iste impedit,
tenetur libero earum, rerum sit, voluptates, similique perferendis magnam voluptatem optio saepe perspiciatis. Doloribus excepturi iure, hic quasi architecto. Eaque iste impedit, tenetur libero earum, rerum sit, voluptates, similique perferendis
magnam voluptatem optio saepe perspiciatis. Doloribus excepturi iure, hic quasi architecto. Eaque iste impedit, tenetur libero earum, rerum sit, voluptates, similique perferendis magnam voluptatem optio saepe perspiciatis. Doloribus excepturi iure,
hic quasi architecto. Eaque iste impedit, tenetur libero earum, rerum sit, voluptates, similique perferendis magnam voluptatem optio saepe perspiciatis. Doloribus excepturi iure, hic quasi architecto. Eaque iste impedit, tenetur libero earum, rerum
</div>
<div class="sidebar">
Sidebar Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus, at odit accusantium, maiores doloremque placeat doloribus repellat optio magnam suscipit eius libero tempore, iure, voluptatum facere ut saepe nam. Debitis. Lorem ipsum dolor sit
amet, consectetur adipisicing elit. Fuga facere enim quas vero quisquam possimus eius cum nisi adipisci, non ipsam architecto explicabo. Quis dolor cum earum quas consequuntur, maiores! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt
corrupti, nulla fugiat recusandae quae necessitatibus voluptatem dicta ut numquam libero tenetur consequatur esse, minima assumenda eum debitis amet quia reiciendis? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius veniam magni quasi
ad sunt qui voluptatum repellat officia deleniti eos obcaecati optio pariatur nesciunt non vitae earum a, rem eligendi. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt corrupti, nulla fugiat recusandae quae necessitatibus voluptatem
dicta ut numquam libero tenetur consequatur esse, minima assumenda eum debitis amet quia reiciendis? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius veniam magni quasi ad sunt qui voluptatum repellat officia deleniti eos obcaecati
optio pariatur nesciunt non vitae earum a, rem eligendi. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt corrupti, nulla fugiat recusandae quae necessitatibus voluptatem dicta ut numquam libero tenetur consequatur esse, minima
assumenda eum debitis amet quia reiciendis? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius veniam magni quasi ad sunt qui voluptatum repellat officia deleniti eos obcaecati optio pariatur nesciunt non vitae earum a, rem eligendi.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt corrupti, nulla fugiat recusandae quae necessitatibus voluptatem dicta ut numquam libero tenetur consequatur esse, minima assumenda eum debitis amet quia reiciendis? Lorem ipsum
dolor sit amet, consectetur adipisicing elit. Eius veniam magni quasi ad sunt qui voluptatum repellat officia deleniti eos obcaecati optio pariatur nesciunt non vitae earum a, rem eligendi. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Fuga quis provident quo, vel nesciunt deserunt vitae quae nulla, mollitia, assumenda et tenetur illum exercitationem numquam! Distinctio sapiente maxime, ullam expedita. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia aliquid numquam,
officiis accusamus dolor commodi quae soluta reprehenderit iusto laboriosam nostrum, natus vel impedit, enim inventore, consectetur harum deleniti consequuntur!
</div>
</div><!-- close .inner-flex-container -->
</div>
jsFiddle
Notes:
Added body { margin: 0; } to prevent overflow and vertical scrollbar when .main has height: 100vh.
Switched flex-direction of .main to column to establish vertical stacking.
Wrapped second and third flex items (.content and .sidebar, respectively) in their own flex container, which has flex-direction row so items are stacked horizontally below the first flex item (.alert).
Method #2: flex-wrap:wrap and calc()
body {
margin: 0;
}
.main {
display: flex;
flex-wrap: wrap;
max-height: 100vh;
background: cyan;
}
.alert {
flex: 1 1 100%;
background: yellow;
height: 30px;
}
.content {
flex-basis: 50%;
background: blue;
overflow-y: auto;
height: calc(100vh - 30px);
order: 1;
}
.sidebar {
flex-basis: 50%;
background: red;
height: calc(100vh - 30px);
overflow-y: auto;
}
<div class="main">
<div class="alert">
Hello
</div>
<div class="content">
Content. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt corrupti, nulla fugiat recusandae quae necessitatibus voluptatem dicta ut numquam libero tenetur consequatur esse, minima assumenda eum debitis amet quia reiciendis? Lorem ipsum
dolor sit amet, consectetur adipisicing elit. Eius veniam magni quasi ad sunt qui voluptatum repellat officia deleniti eos obcaecati optio pariatur nesciunt non vitae earum a, rem eligendi. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Incidunt corrupti, nulla fugiat recusandae quae necessitatibus voluptatem dicta ut numquam libero tenetur consequatur esse, minima assumenda eum debitis amet quia reiciendis? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius veniam magni
quasi ad sunt qui voluptatum repellat officia deleniti eos obcaecati optio pariatur nesciunt non vitae earum a, rem eligendi. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt corrupti, nulla fugiat recusandae quae necessitatibus
voluptatem dicta ut numquam libero tenetur consequatur esse, minima assumenda eum debitis amet quia reiciendis? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius veniam magni quasi ad sunt qui voluptatum repellat officia deleniti eos
obcaecati optio pariatur nesciunt non vitae earum a, rem eligendi. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt corrupti, nulla fugiat recusandae quae necessitatibus voluptatem dicta ut numquam libero tenetur consequatur esse,
minima assumenda eum debitis amet quia reiciendis? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius veniam magni quasi ad sunt qui voluptatum repellat officia deleniti eos obcaecati optio pariatur nesciunt non vitae earum a, rem eligendi.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae explicabo, eum voluptas distinctio quidem, voluptate repudiandae ad aliquam praesentium fuga tempora magni natus necessitatibus consectetur minima maxime, placeat consequatur optio. Lorem
ipsum dolor sit amet, consectetur adipisicing elit. Quos error animi consequatur doloribus maiores in delectus esse illo fugit quod distinctio, voluptatem omnis earum voluptate corporis facere ea enim laborum. Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Quo maxime sit ab blanditiis eum, consequatur aspernatur odio nobis fuga, sed ratione dignissimos dolores nulla ea eaque. Officia, dolore harum nemo. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque iste impedit, tenetur
libero earum, rerum sit, voluptates, similique perferendis magnam voluptatem optio saepe perspiciatis. Doloribus excepturi iure, hic quasi architecto. Eaque iste impedit, tenetur libero earum, rerum sit, voluptates, similique perferendis magnam voluptatem
optio saepe perspiciatis. Doloribus excepturi iure, hic quasi architecto.
</div>
<div class="sidebar">
Sidebar Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus, at odit accusantium, maiores doloremque placeat doloribus repellat optio magnam suscipit eius libero tempore, iure, voluptatum facere ut saepe nam. Debitis. Lorem ipsum dolor sit
amet, consectetur adipisicing elit. Fuga facere enim quas vero quisquam possimus eius cum nisi adipisci, non ipsam architecto explicabo. Quis dolor cum earum quas consequuntur, maiores! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt
corrupti, nulla fugiat recusandae quae necessitatibus voluptatem dicta ut numquam libero tenetur consequatur esse, minima assumenda eum debitis amet quia reiciendis? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius veniam magni quasi
ad sunt qui voluptatum repellat officia deleniti eos obcaecati optio pariatur nesciunt non vitae earum a, rem eligendi. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt corrupti, nulla fugiat recusandae quae necessitatibus voluptatem
dicta ut numquam libero tenetur consequatur esse, minima assumenda eum debitis amet quia reiciendis? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius veniam magni quasi ad sunt qui voluptatum repellat officia deleniti eos obcaecati optio
pariatur nesciunt non vitae earum a, rem eligendi. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt corrupti, nulla fugiat recusandae quae necessitatibus voluptatem dicta ut numquam libero tenetur consequatur esse, minima assumenda
eum debitis amet quia reiciendis? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius veniam magni quasi ad sunt qui voluptatum repellat officia deleniti eos obcaecati optio pariatur nesciunt non vitae earum a, rem eligendi. Lorem ipsum
dolor sit amet, consectetur adipisicing elit. Incidunt corrupti, nulla fugiat recusandae quae necessitatibus voluptatem dicta ut numquam libero tenetur consequatur esse, minima assumenda eum debitis amet quia reiciendis? Lorem ipsum dolor sit amet,
consectetur adipisicing elit. Eius veniam magni quasi ad sunt qui voluptatum repellat officia deleniti eos obcaecati optio pariatur nesciunt non vitae earum a, rem eligendi. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga quis provident
quo, vel nesciunt deserunt vitae quae nulla, mollitia, assumenda et tenetur illum exercitationem numquam! Distinctio sapiente maxime, ullam expedita. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia aliquid numquam, officiis accusamus
dolor commodi quae soluta reprehenderit iusto laboriosam nostrum, natus vel impedit, enim inventore, consectetur harum deleniti consequuntur!
</div>
</div>
jsFiddle
Notes:
No changes to HTML
calc used to subtract height of flex item one from height of flex items two and three, enabling them to wrap underneath in a 100vh container.

Edited to add the wrapper
.content{
flex: 1 1 auto;
background: blue;
overflow-y: auto; */
width: calc(100% - 200px); // Or use flex: 1 where you got flex: 1 1 auto;
overflow-y: auto;
}
.main .sidebar {
flex: 0 0 auto;
width: 200px;
background: red;
overflow-y: auto;
order: -1;
}
.wrapper{
display:flex;
flex-wrap:wrap;
}

Collapse divs vertically CSS

I'm working on a website and I've this code
.container {
width: 100%;
margin:0 auto;
}
.container div {
width: 25%;
display: inline-block;
vertical-align:top;
background: lightblue;
border: 1px solid black
}
<div class="container">
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo nisi, sit eius provident, vitae, quisquam impedit dolore ad aperiam incidunt optio consequuntur aliquam facilis hic ullam! Quisquam tempora, fuga numquam.</p>
</div>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis quod, ipsa quidem natus quis quam odit molestiae sit, debitis amet expedita fugiat nesciunt at modi eos, porro laborum quas optio.</p>
</div>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis, necessitatibus alias atque nulla praesentium dolorem, dignissimos autem culpa placeat quae doloribus unde illo fugiat! Delectus quia recusandae aperiam est eligendi quae doloribus unde illo fugiat! Delectus quia recusandae aperiam est eligendi.</p>
</div>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora labore optio placeat aperiam facilis recusandae velit, minus modi quo dolores molestias in ratione officia accusantium, reiciendis porro, ipsam, repellendus atque!</p>
</div>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime quisquam ratione ducimus temporibus rerum, voluptatum facilis repellat quos nostrum commodi adipisci hic libero, rem optio consequatur tempora sed sequi voluptas!</p>
</div>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio dolor nobis veritatis deserunt voluptate illum, voluptatibus consequuntur optio autem sint, accusamus ipsam, quidem nesciunt doloribus similique doloremque magni dolorem. Animi.</p>
</div>
</div>
I want my divs collapse vertically like this image :
I try to add a float: left; but it does not work.
Thanks for your help !

Add flex properties to your .container class.
.container {
width: 100%;
margin:0 auto;
display:flex;
flex-wrap:wrap;
}

It is not that easy to achieve with few lines of html + css when you don't want to use flexbox.
I suspect you should give a try this plugin:
http://masonry.desandro.com/