Footer at the very end of the web page (after the content) - html

Info in advance:
I've been looking for a solution for almost a week now and have already searched half of StackOverflow.
I know that there are many questions with the same title, but these have not brought me any further.
So please before commenting that this is a duplicate, first try the respective solution on my code.
The goal:
I want to add my footer at the very end of the page after the content.
The problem:
The ideas I have tried so far do not work properly. Either the content is permanently displayed at the edge of the screen, no matter where you are (so to speak a sticky footer), or the footer is in the middle of the content.
The Code (HTML & SCSS):
<html>
<head>
<link id="theme" rel="stylesheet" href="style.css" type="text/css" />
<title>Some page with footer</title>
</head>
<body>
<!-- Navigation - Don't worry, the navigation stylesheet isn't included-->
<div class="navigation">
<input id="burger" type="checkbox" />
<label for="burger">
<span></span>
<span></span>
</label>
<nav>
<div class="logo">
</div>
<ul>
<li>Some navigation</li>
<li>Some content</li>
</ul>
</nav>
<div class="icons">
</div>
</div>
<!-- Content -->
<main>
<div class="content">
<h2 id="faq">FAQ</h2>
<p>Some content here:
<br>Lorem ipsum dolor sit amet consectetur adipisicing elit.
<br>Consectetur repellendus quia ab, voluptates tempore ipsam nemo?
<br>Ipsum mollitia odio maiores nisi dignissimos, temporibus magnam impedit est optio voluptate sit laboriosam?
<br>Lorem ipsum dolor sit amet consectetur adipisicing elit.
<br>Illum suscipit nobis, explicabo ducimus voluptates laudantium pariatur eius delectus repudiandae?
<br>Iure eaque sit quisquam itaque ducimus nam voluptates debitis nihil eligendi?
<br>Lorem ipsum dolor sit amet consectetur adipisicing elit.
<br>Consectetur repellendus quia ab, voluptates tempore ipsam nemo?
<br>Ipsum mollitia odio maiores nisi dignissimos, temporibus magnam impedit est optio voluptate sit laboriosam?
<br>Lorem ipsum dolor sit amet consectetur adipisicing elit.
<br>Illum suscipit nobis, explicabo ducimus voluptates laudantium pariatur eius delectus repudiandae?
<br>Iure eaque sit quisquam itaque ducimus nam voluptates debitis nihil eligendi?
<br>Lorem ipsum dolor sit amet consectetur adipisicing elit.
<br>Consectetur repellendus quia ab, voluptates tempore ipsam nemo?
<br>Ipsum mollitia odio maiores nisi dignissimos, temporibus magnam impedit est optio voluptate sit laboriosam?
<br>Lorem ipsum dolor sit amet consectetur adipisicing elit.
<br>Illum suscipit nobis, explicabo ducimus voluptates laudantium pariatur eius delectus repudiandae?
<br>Iure eaque sit quisquam itaque ducimus nam voluptates debitis nihil eligendi?
<br>Lorem ipsum dolor sit amet consectetur adipisicing elit.
<br>Consectetur repellendus quia ab, voluptates tempore ipsam nemo?
<br>Ipsum mollitia odio maiores nisi dignissimos, temporibus magnam impedit est optio voluptate sit laboriosam?
<br>Lorem ipsum dolor sit amet consectetur adipisicing elit.
<br>Illum suscipit nobis, explicabo ducimus voluptates laudantium pariatur eius delectus repudiandae?
<br>Iure eaque sit quisquam itaque ducimus nam voluptates debitis nihil eligendi?
<br>Lorem ipsum dolor sit amet consectetur adipisicing elit.
<br>Consectetur repellendus quia ab, voluptates tempore ipsam nemo?
<br>Ipsum mollitia odio maiores nisi dignissimos, temporibus magnam impedit est optio voluptate sit laboriosam?
<br>Lorem ipsum dolor sit amet consectetur adipisicing elit.
<br>Illum suscipit nobis, explicabo ducimus voluptates laudantium pariatur eius delectus repudiandae?
<br>Iure eaque sit quisquam itaque ducimus nam voluptates debitis nihil eligendi?
<br>Lorem ipsum dolor sit amet consectetur adipisicing elit.
</p>
<br>
</div>
</main>
<!-- Footer -->
<footer>
<ul>
<li># Copyright 2021 by some guy</li>
<li>This is not the final website.</li>
<li>Contact</li>
<li>AGB/TERMS</li>
<li>LEGAL</li>
</ul>
</footer>
</body>
</html>
body {
main {
position: absolute;
top: 15vh;
bottom: 0;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
line-height: 40px;
text-align: center;
width: 90%;
h2 {
position: relative;
font-family: 'Times New Roman', Times, serif ;
font-size: 2.7vh;
text-align: center;
}
p {
position: relative;
font-family: 'Gill Sans', 'Gill Sans MT', sans-serif;
font-size: 1.5vh;
text-align: center;
}
}
footer {
position: absolute; // Footer is inside the content
left: 0;
top: 100vh;
bottom: 0;
width: 100%;
height: 60px;
text-align: center;
background-color: red;
ul li {
display: inline;
}
}
}


I think this might help you
body {
margin: 0;
padding: 0;
}
.content {
top: 15vh;
bottom: 0;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
line-height: 40px;
text-align: center;
width: 90%;
}
h2 {
position: relative;
font-family: 'Times New Roman', Times, serif;
font-size: 2.7vh;
text-align: center;
}
p {
position: relative;
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
font-size: 1.5vh;
text-align: center;
}
footer {
left: 0;
margin: 0;
padding: 0;
height: 60px;
text-align: center;
background-color: red;
padding: 0;
}
ul, li {
display: inline;
}
<html lang="en">
<head>
<link id="theme" rel="stylesheet" href="style.css" type="text/css" />
<title>Some page with footer</title>
</head>
<body>
<!-- Navigation - Don't worry, the navigation stylesheet isn't included-->
<div class="navigation">
<input id="burger" type="checkbox" />
<label for="burger">
<span></span>
<span></span>
</label>
<nav>
<div class="logo">
</div>
<ul>
<li>Some navigation</li>
<li>Some content</li>
</ul>
</nav>
<div class="icons">
</div>
</div>
<!-- Content -->
<main>
<div class="content">
<h2 id="faq">FAQ</h2>
<p>Some content here:
<br>Ipsum mollitia odio maiores nisi dignissimos, temporibus magnam impedit est optio voluptate sit laboriosam?
<br>Lorem ipsum dolor sit amet consectetur adipisicing elit.
<br>Illum suscipit nobis, explicabo ducimus voluptates laudantium pariatur eius delectus repudiandae?
<br>Iure eaque sit quisquam itaque ducimus nam voluptates debitis nihil eligendi?
<br>Lorem ipsum dolor sit amet consectetur adipisicing elit.
<br>Consectetur repellendus quia ab, voluptates tempore ipsam nemo?
<br>Ipsum mollitia odio maiores nisi dignissimos, temporibus magnam impedit est optio voluptate sit laboriosam?
<br>Lorem ipsum dolor sit amet consectetur adipisicing elit.
<br>Illum suscipit nobis, explicabo ducimus voluptates laudantium pariatur eius delectus repudiandae?
<br>Iure eaque sit quisquam itaque ducimus nam voluptates debitis nihil eligendi?
<br>Lorem ipsum dolor sit amet consectetur adipisicing elit.
<br>Consectetur repellendus quia ab, voluptates tempore ipsam nemo?
<br>Ipsum mollitia odio maiores nisi dignissimos, temporibus magnam impedit est optio voluptate sit laboriosam?
<br>Lorem ipsum dolor sit amet consectetur adipisicing elit.
<br>Illum suscipit nobis, explicabo ducimus voluptates laudantium pariatur eius delectus repudiandae?
<br>Iure eaque sit quisquam itaque ducimus nam voluptates debitis nihil eligendi?
<br>Lorem ipsum dolor sit amet consectetur adipisicing elit.
<br>Consectetur repellendus quia ab, voluptates tempore ipsam nemo?
<br>Ipsum mollitia odio maiores nisi dignissimos, temporibus magnam impedit est optio voluptate sit laboriosam?
<br>Lorem ipsum dolor sit amet consectetur adipisicing elit.
<br>Illum suscipit nobis, explicabo ducimus voluptates laudantium pariatur eius delectus repudiandae?
<br>Iure eaque sit quisquam itaque ducimus nam voluptates debitis nihil eligendi?
<br>Lorem ipsum dolor sit amet consectetur adipisicing elit.
</p>
<br>
</div>
</main>
<!-- Footer -->
<footer>
<ul>
<li># Copyright 2021 by some guy</li>
<li>This is not the final website.</li>
<li>Contact</li>
<li>AGB/TERMS</li>
<li>LEGAL</li>
</ul>
</footer>
</body>
</html>


WordPress theme developers are always faced with this problem. One way to go about is to give your "main" element a style of
height:100vh;
This way it pushes the footer to the bottom of the page without you going through the stress of
position:absolute;

Related

How to put a scrollable gradient background at the bottom of an element?

I am trying to put a scrollable gradient background at the bottom of my body.
/*Set Up*/
* {
padding: 0;
margin: 0;
}
nav,
header,
main,
footer,
section,
article,
aside {
display: block
}
/*Set Up*/
* {
color: white;
}
html {
height: 100%;
}
body {
font-family: 'Poppins', sans-serif;
max-width: 100%;
margin-left: auto;
margin-right: auto;
background: linear-gradient(to bottom right, #040d21, #040d21, #ffffff) no-repeat bottom;
/*linear-gradient(to bottom right , #042d6b, #040d21, #040d21) no-repeat scroll*/
/*url("../media/techgrid.png")*/
background-color: #040d21;
background-size: 100%;
height: 1000px;
/* 461f48*/
}
header {
margin: 0 auto;
border: red solid;
text-align: center;
width: 60%;
}
main {
margin: 0 auto;
border: red solid;
width: 70%;
position: center;
}
p {
text-align: center;
padding: 20px;
}
h1 {
font-weight: 800;
}
<!DOCTYPE html>
<html>
<head>
<title>Mueller-UIs</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/stylesheet.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght#400;800&display=swap" rel="stylesheet">
</head>
<body>
<header>
<h1>This is a fresh website</h1>
<p>This is a beautiful test paragraph.</p>
</header>
<main>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid est hic obcaecati, officiis quae recusandae sit! Accusamus ex maxime officiis pariatur quaerat. Adipisci impedit ipsum modi optio quis rerum voluptate?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid est hic obcaecati, officiis quae recusandae sit! Accusamus ex maxime officiis pariatur quaerat. Adipisci impedit ipsum modi optio quis rerum voluptate?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid est hic obcaecati, officiis quae recusandae sit! Accusamus ex maxime officiis pariatur quaerat. Adipisci impedit ipsum modi optio quis rerum voluptate?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid est hic obcaecati, officiis quae recusandae sit! Accusamus ex maxime officiis pariatur quaerat. Adipisci impedit ipsum modi optio quis rerum voluptate?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid est hic obcaecati, officiis quae recusandae sit! Accusamus ex maxime officiis pariatur quaerat. Adipisci impedit ipsum modi optio quis rerum voluptate?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid est hic obcaecati, officiis quae recusandae sit! Accusamus ex maxime officiis pariatur quaerat. Adipisci impedit ipsum modi optio quis rerum voluptate?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid est hic obcaecati, officiis quae recusandae sit! Accusamus ex maxime officiis pariatur quaerat. Adipisci impedit ipsum modi optio quis rerum voluptate?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid est hic obcaecati, officiis quae recusandae sit! Accusamus ex maxime officiis pariatur quaerat. Adipisci impedit ipsum modi optio quis rerum voluptate?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid est hic obcaecati, officiis quae recusandae sit! Accusamus ex maxime officiis pariatur quaerat. Adipisci impedit ipsum modi optio quis rerum voluptate?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid est hic obcaecati, officiis quae recusandae sit! Accusamus ex maxime officiis pariatur quaerat. Adipisci impedit ipsum modi optio quis rerum voluptate?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid est hic obcaecati, officiis quae recusandae sit! Accusamus ex maxime officiis pariatur quaerat. Adipisci impedit ipsum modi optio quis rerum voluptate?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid est hic obcaecati, officiis quae recusandae sit! Accusamus ex maxime officiis pariatur quaerat. Adipisci impedit ipsum modi optio quis rerum voluptate?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid est hic obcaecati, officiis quae recusandae sit! Accusamus ex maxime officiis pariatur quaerat. Adipisci impedit ipsum modi optio quis rerum voluptate?</p>
</main>
<footer>
</footer>
</body>
</html>
The result is a scrollable gradient at the top, although I put background: bottom:
The gradient can be put to the bottom by background: fixed but then it just gets fixated to the viewport.
How can I put it to the bottom of body so it stays there and make it scrollable?

In your CSS code you have specified a height of 100% in the html area and a height of 1000px in the body area. If you remove these two, everything should work as you wanted it to.
This is what the code would look like:
/*Set Up*/
* {
padding: 0;
margin: 0;
}
nav,
header,
main,
footer,
section,
article,
aside {
display: block
}
/*Set Up*/
* {
color: white;
}
body {
font-family: 'Poppins', sans-serif;
max-width: 100%;
margin-left: auto;
margin-right: auto;
background: linear-gradient(to bottom right, #040d21, #040d21, #ffffff) no-repeat bottom;
/*linear-gradient(to bottom right , #042d6b, #040d21, #040d21) no-repeat scroll*/
/*url("../media/techgrid.png")*/
background-color: #040d21;
background-size: 100%;
/* 461f48*/
}
header {
margin: 0 auto;
border: red solid;
text-align: center;
width: 60%;
}
main {
margin: 0 auto;
border: red solid;
width: 70%;
position: center;
}
p {
text-align: center;
padding: 20px;
}
h1 {
font-weight: 800;
}
<!DOCTYPE html>
<html>
<head>
<title>Mueller-UIs</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/stylesheet.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght#400;800&display=swap" rel="stylesheet">
</head>
<body>
<header>
<h1>This is a fresh website</h1>
<p>This is a beautiful test paragraph.</p>
</header>
<main>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid est hic obcaecati, officiis quae recusandae sit! Accusamus ex maxime officiis pariatur quaerat. Adipisci impedit ipsum modi optio quis rerum voluptate?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid est hic obcaecati, officiis quae recusandae sit! Accusamus ex maxime officiis pariatur quaerat. Adipisci impedit ipsum modi optio quis rerum voluptate?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid est hic obcaecati, officiis quae recusandae sit! Accusamus ex maxime officiis pariatur quaerat. Adipisci impedit ipsum modi optio quis rerum voluptate?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid est hic obcaecati, officiis quae recusandae sit! Accusamus ex maxime officiis pariatur quaerat. Adipisci impedit ipsum modi optio quis rerum voluptate?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid est hic obcaecati, officiis quae recusandae sit! Accusamus ex maxime officiis pariatur quaerat. Adipisci impedit ipsum modi optio quis rerum voluptate?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid est hic obcaecati, officiis quae recusandae sit! Accusamus ex maxime officiis pariatur quaerat. Adipisci impedit ipsum modi optio quis rerum voluptate?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid est hic obcaecati, officiis quae recusandae sit! Accusamus ex maxime officiis pariatur quaerat. Adipisci impedit ipsum modi optio quis rerum voluptate?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid est hic obcaecati, officiis quae recusandae sit! Accusamus ex maxime officiis pariatur quaerat. Adipisci impedit ipsum modi optio quis rerum voluptate?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid est hic obcaecati, officiis quae recusandae sit! Accusamus ex maxime officiis pariatur quaerat. Adipisci impedit ipsum modi optio quis rerum voluptate?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid est hic obcaecati, officiis quae recusandae sit! Accusamus ex maxime officiis pariatur quaerat. Adipisci impedit ipsum modi optio quis rerum voluptate?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid est hic obcaecati, officiis quae recusandae sit! Accusamus ex maxime officiis pariatur quaerat. Adipisci impedit ipsum modi optio quis rerum voluptate?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid est hic obcaecati, officiis quae recusandae sit! Accusamus ex maxime officiis pariatur quaerat. Adipisci impedit ipsum modi optio quis rerum voluptate?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid est hic obcaecati, officiis quae recusandae sit! Accusamus ex maxime officiis pariatur quaerat. Adipisci impedit ipsum modi optio quis rerum voluptate?</p>
</main>
<footer>
</footer>
</body>
</html>

Floating divs are giving columns with different height

I'm trying to make columns in HTML and css without using grids, flexbox or anything fancy. But the heights of individual columns appear to increase as they go from left to right and it also seems like the contents of the third column is taking up more space.
I've tried setting a specific height to the columns but they don't work as well.
#exhibit {
width: 100%;
height: 600px;
}
.col {
width: 33.3%;
font-size: 1.2em;
float: left;
font-family: sans-serif;
overflow: hidden;
}
.smol-round {
display: block;
border-radius: 50%;
border-style: solid;
border-color: #048eaa;
border-width: 3px;
}
<section id="exhibit">
<!--second block of pics and paras-->
<div class="col">
<h3>How To Dog</h3>
<image class="smol-round" src="images/dog2-sq.jpg" alt="a pic of a sweet doggo"></image>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita qui at modi ipsa ea obcaecati rerum nam iusto, velit suscipit delectus ullam eum dolores nostrum inventore reprehenderit accusamus sapiente libero. Lorem ipsum, dolor sit amet consectetur
adipisicing elit. Nesciunt, consequuntur exercitationem unde commodi sapiente quae itaque dolorem accusantium at fugit et nostrum praesentium assumenda ducimus. Quo porro accusantium deleniti expedita.<br>
<button>How</button>
</div>
<div class="col ">
<h3>What Is Dogs</h3>
<image class="smol-round" src="images/dog3-sq.jpg" alt="a pic of a sweet doggo"></image>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Atque culpa hic temporibus, nihil est perspiciatis excepturi odio omnis reprehenderit, facilis quae repudiandae a expedita molestiae ullam recusandae accusamus aperiam alias. Lorem ipsum dolor
sit amet consectetur adipisicing elit. Deserunt debitis nulla doloremque corporis quam quidem sequi itaque, deleniti, eum perspiciatis reiciendis, ipsum illo maiores. Ducimus quae explicabo aperiam laudantium. Necessitatibus.
<br>
<button>What</button>
</div>
<div class="col">
<h3>Facts From Dogs</h3>
<image class="smol-round" src="images/dog4-sq.jpg" alt="a pic of a sweet doggo"></image>
Lorem ipsum the third dolor sit amet consectetur adipisicing elit. Quia a quod ea id nostrum quas, et dolore ad necessitatibus nam amet libero vitae vero aspernatur consequatur at iusto, mollitia quis. Lorem ipsum dolor sit amet consectetur adipisicing
elit. Perspiciatis unde officia harum repellat sequi necessitatibus nulla at nobis aliquid ratione velit provident corrupti facere impedit eius eum hic, aspernatur eveniet.
<br>
<button>Facts</button>
</div>
</section>
The three columns should have the same height and occupy equal space.

#exhibit {
height: 600px;
display: table;
width: 100%;
}
.col {
font-size: 1.2em;
font-family: sans-serif;
overflow: hidden;
display: table-cell;
background-color: red;
}
.smol-round {
display: block;
border-radius: 50%;
border-style: solid;
border-color: #048eaa;
border-width: 3px;
}
<section id="exhibit">
<!--second block of pics and paras-->
<div class="col">
<h3>How To Dog</h3>
<image class="smol-round" src="images/dog2-sq.jpg" alt="a pic of a sweet doggo"></image>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita qui at modi ipsa ea obcaecati rerum nam iusto, velit suscipit delectus ullam eum dolores nostrum inventore reprehenderit accusamus sapiente libero. Lorem ipsum, dolor sit amet consectetur
adipisicing elit. Nesciunt, consequuntur exercitationem unde commodi sapiente quae itaque dolorem accusantium at fugit et nostrum praesentium assumenda ducimus. Quo porro accusantium deleniti expedita.<br>
<button>How</button>
</div>
<div class="col ">
<h3>What Is Dogs</h3>
<image class="smol-round" src="images/dog3-sq.jpg" alt="a pic of a sweet doggo"></image>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Atque culpa hic temporibus, nihil est perspiciatis excepturi odio omnis reprehenderit, facilis quae repudiandae a expedita molestiae ullam recusandae accusamus aperiam alias. Lorem ipsum dolor
sit amet consectetur adipisicing elit. Deserunt debitis nulla doloremque corporis quam quidem sequi itaque, deleniti, eum perspiciatis reiciendis, ipsum illo maiores. Ducimus quae explicabo aperiam laudantium. Necessitatibus.
<br>
<button>What</button>
</div>
<div class="col">
<h3>Facts From Dogs</h3>
<image class="smol-round" src="images/dog4-sq.jpg" alt="a pic of a sweet doggo"></image>
Lorem ipsum the third dolor sit amet consectetur adipisicing elit. Quia a quod ea id nostrum quas, et dolore ad necessitatibus nam amet libero vitae vero aspernatur consequatur at iusto, mollitia quis. Lorem ipsum dolor sit amet consectetur adipisicing
elit. Perspiciatis unde officia harum repellat sequi necessitatibus nulla at nobis aliquid ratione velit provident corrupti facere impedit eius eum hic, aspernatur eveniet.
<br>
<button>Facts</button>
</div>
</section>
You have to used display table type. but you will abled to achieved the .col all at same height

Background color not applying

I'm new in web programming and I'm actually learning html and css and I have a problem applying background color in some parts of my web page.
Can someone help me to apply the background color in the header as I've done in my footer. Don't know why it is not working on the header.I've tried to set the same background color to the childs of the header but it is a dirt solution and does not look nice.
Thanks.
index.html
<header>
<div class="logo">
<h2 class="logo">Notflix</h2>
</div>
<div class="searchBarDiv">
<form class="searchBar" action="index.html" method="post">
<input class="bar" type="text" name="content">
<input type="submit" value="Search"
</form>
</div>
<div class="cart">
<img class="cartImg" src="images/cart.png" alt="cartImage">
</div>
</header>
<aside class="lateralMenu">
</aside>
<footer>
<h4 class="devInfo">Copyright © Miguel Olivera Cardo Madrid, Spain</h4>
</footer>
style.css
body {
margin: 0 0
}
header {
position: fixed;
width: 100%;
background-color: #CECDCC;
overflow: hidden;
}
.logo {
position: fixed;
width: 25%;
}
.logo h2 {
text-align: center;
}
.searchBarDiv{
position: fixed;
width:50%;
left:25%;
top:2.5%;
}
.bar {
width: 80%;
}
.cart {
position: fixed;
width: 25%;
left:75%;
}
.cartImg {
width:12%;
margin-top: 3%;
margin-left: 31%;
}
footer {
position: fixed;
bottom:0;
width: 100%;
background-color: #CECDCC;
}
.devInfo {
text-align: center;
}

Everything inside the header is position: fixed, so it is taken out of normal flow.
Since there is nothing inside the header which is in normal flow, there is nothing to cause the header to have any height.
Since it is zero pixels tall, you can't see any background.
If you want the elements inside the header to be side-by-side, lay them out using flexbox instead of positioning.

You must set a height to the header
body {
margin: 0 0
}
header {
position: fixed;
width: 100%;
height:100px;;
background-color: #CECDCC;
overflow:hidden;
}
.logo {
position: fixed;
width: 25%;
}
.logo h2 {
text-align: center;
}
.searchBarDiv{
position: fixed;
width:50%;
left:25%;
top:2.5%;
}
.bar {
width: 80%;
}
.cart {
position: fixed;
width: 25%;
left:75%;
}
.cartImg {
width:12%;
margin-top: 3%;
margin-left: 31%;
}
footer {
position: fixed;
bottom:0;
width: 100%;
background-color: #CECDCC;
}
.devInfo {
text-align: center;
}
<header>
<div class="logo">
<h2 class="logo">Notflix</h2>
</div>
<div class="searchBarDiv">
<form class="searchBar" action="index.html" method="post">
<input class="bar" type="text" name="content">
<input type="submit" value="Search"
</form>
</div>
<div class="cart">
<img class="cartImg" src="images/cart.png" alt="cartImage">
</div>
</header>
<aside class="lateralMenu">
</aside>
<footer>
<h4 class="devInfo">Copyright © Miguel Olivera Cardo Madrid, Spain</h4>
</footer>

Your problem solve .
body {
margin: 0 0 0 0 ;
}
header {
position: fixed;
width: 100%;
background-color: #CECDCC;
overflow: hidden;
height:10%;
}
.logo {
position: fixed;
width: 25%;
margin:0
}
.logo h2 {
text-align: center;
}
.searchBarDiv{
position: fixed;
width:50%;
left:25%;
top:2.5%;
}
.bar {
width: 80%;
}
.cart {
position: fixed;
width: 25%;
left:75%;
}
.cartImg {
width:20%;
float: right;
margin-right:10px;
/*margin-top:20px;*/
}
footer {
position: fixed;
bottom:0;
width: 100%;
background-color: #CECDCC;
}
.devInfo {
text-align: center;
}
.logo{
background-image:url('https://picsum.photos/id/1011/300/30');
background-repeat: no-repeat;
color:white;
}
#inside-logo{
position: absolute;
}
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<link rel="stylesheet" href="style.css">
<body>
<header>
<div id="inside-logo">
<div class="logo">
<h2 class="logo">Notflix</h2>
</div>
<div class="searchBarDiv">
<form class="searchBar" action="index.html" method="post">
<input class="bar" type="text" name="content">
<input type="submit" value="Search">
</form>
</div>
<div class="cart">
<img class="cartImg" src="https://picsum.photos/id/1011/30/30" alt="cartImage">
</div>
</div>
</header>
<aside class="lateralMenu">
</aside>
<p>
The syntax is strange because $.ajax predates the FormData. It’s easier with window.fetch! Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Commodi nam harum pariatur, consectetur deleniti nulla iure ut! Ducimus ad esse harum iusto minus
repudiandae, excepturi autem amet id. Ratione, accusantium. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Amet esse corporis tempora quam assumenda minus atque fugiat possimus temporibus ipsam aspernatur, minima asperiores
maxime! Aperiam quam, iste vitae assumenda sequi. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem
voluptate id minima ratione amet accusamus facere, quis commodi nam impedit. In at aliquid optio atque animi itaque
dolorem facere cum.
The syntax is strange because $.ajax predates the FormData. It’s easier with window.fetch! Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Commodi nam harum pariatur, consectetur deleniti nulla iure ut! Ducimus ad esse harum iusto minus
repudiandae, excepturi autem amet id. Ratione, accusantium. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Amet esse corporis tempora quam assumenda minus atque fugiat possimus temporibus ipsam aspernatur, minima asperiores
maxime! Aperiam quam, iste vitae assumenda sequi. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem
voluptate id minima ratione amet accusamus facere, quis commodi nam impedit. In at aliquid optio atque animi itaque
dolorem facere cum.
The syntax is strange because $.ajax predates the FormData. It’s easier with window.fetch! Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Commodi nam harum pariatur, consectetur deleniti nulla iure ut! Ducimus ad esse harum iusto minus
repudiandae, excepturi autem amet id. Ratione, accusantium. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Amet esse corporis tempora quam assumenda minus atque fugiat possimus temporibus ipsam aspernatur, minima asperiores
maxime! Aperiam quam, iste vitae assumenda sequi. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem
voluptate id minima ratione amet accusamus facere, quis commodi nam impedit. In at aliquid optio atque animi itaque
dolorem facere cum.
The syntax is strange because $.ajax predates the FormData. It’s easier with window.fetch! Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Commodi nam harum pariatur, consectetur deleniti nulla iure ut! Ducimus ad esse harum iusto minus
repudiandae, excepturi autem amet id. Ratione, accusantium. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Amet esse corporis tempora quam assumenda minus atque fugiat possimus temporibus ipsam aspernatur, minima asperiores
maxime! Aperiam quam, iste vitae assumenda sequi. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem
voluptate id minima ratione amet accusamus facere, quis commodi nam impedit. In at aliquid optio atque animi itaque
dolorem facere cum.
The syntax is strange because $.ajax predates the FormData. It’s easier with window.fetch! Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Commodi nam harum pariatur, consectetur deleniti nulla iure ut! Ducimus ad esse harum iusto minus
repudiandae, excepturi autem amet id. Ratione, accusantium. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Amet esse corporis tempora quam assumenda minus atque fugiat possimus temporibus ipsam aspernatur, minima asperiores
maxime! Aperiam quam, iste vitae assumenda sequi. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem
voluptate id minima ratione amet accusamus facere, quis commodi nam impedit. In at aliquid optio atque animi itaque
dolorem facere cum.
The syntax is strange because $.ajax predates the FormData. It’s easier with window.fetch! Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Commodi nam harum pariatur, consectetur deleniti nulla iure ut! Ducimus ad esse harum iusto minus
repudiandae, excepturi autem amet id. Ratione, accusantium. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Amet esse corporis tempora quam assumenda minus atque fugiat possimus temporibus ipsam aspernatur, minima asperiores
maxime! Aperiam quam, iste vitae assumenda sequi. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem
voluptate id minima ratione amet accusamus facere, quis commodi nam impedit. In at aliquid optio atque animi itaque
dolorem facere cum.
The syntax is strange because $.ajax predates the FormData. It’s easier with window.fetch! Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Commodi nam harum pariatur, consectetur deleniti nulla iure ut! Ducimus ad esse harum iusto minus
repudiandae, excepturi autem amet id. Ratione, accusantium. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Amet esse corporis tempora quam assumenda minus atque fugiat possimus temporibus ipsam aspernatur, minima asperiores
maxime! Aperiam quam, iste vitae assumenda sequi. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem
voluptate id minima ratione amet accusamus facere, quis commodi nam impedit. In at aliquid optio atque animi itaque
dolorem facere cum.
The syntax is strange because $.ajax predates the FormData. It’s easier with window.fetch! Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Commodi nam harum pariatur, consectetur deleniti nulla iure ut! Ducimus ad esse harum iusto minus
repudiandae, excepturi autem amet id. Ratione, accusantium. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Amet esse corporis tempora quam assumenda minus atque fugiat possimus temporibus ipsam aspernatur, minima asperiores
maxime! Aperiam quam, iste vitae assumenda sequi. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem
voluptate id minima ratione amet accusamus facere, quis commodi nam impedit. In at aliquid optio atque animi itaque
dolorem facere cum.
The syntax is strange because $.ajax predates the FormData. It’s easier with window.fetch! Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Commodi nam harum pariatur, consectetur deleniti nulla iure ut! Ducimus ad esse harum iusto minus
repudiandae, excepturi autem amet id. Ratione, accusantium. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Amet esse corporis tempora quam assumenda minus atque fugiat possimus temporibus ipsam aspernatur, minima asperiores
maxime! Aperiam quam, iste vitae assumenda sequi. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem
voluptate id minima ratione amet accusamus facere, quis commodi nam impedit. In at aliquid optio atque animi itaque
dolorem facere cum.
The syntax is strange because $.ajax predates the FormData. It’s easier with window.fetch! Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Commodi nam harum pariatur, consectetur deleniti nulla iure ut! Ducimus ad esse harum iusto minus
repudiandae, excepturi autem amet id. Ratione, accusantium. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Amet esse corporis tempora quam assumenda minus atque fugiat possimus temporibus ipsam aspernatur, minima asperiores
maxime! Aperiam quam, iste vitae assumenda sequi. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem
voluptate id minima ratione amet accusamus facere, quis commodi nam impedit. In at aliquid optio atque animi itaque
dolorem facere cum.
</p>
<footer>
<h4 class="devInfo">Copyright © Miguel Olivera Cardo Madrid, Spain</h4>
</footer>
</body>
</html>

How can I use flexbox to achieve a floating sidebar layout with content that wraps around the sidebar?

I'm trying to achieve a responsive layout that looks like this on desktop:
And like this on mobile:
Note the following requirements:
Sidebar should only take up as much space vertically as is necessary to fit the content. Below the sidebar, content from the main section should take up the full width.
On mobile, the sidebar should appear below the main content.
Here is a jsfiddle containing my initial HTML and CSS:
https://jsfiddle.net/sergkr/np6k2tj3/
and a snippet:
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
padding: 0 2em;
line-height: 1.4;
color: #333;
background-color: #fff
}
section {
margin: 1.6em 0;
}
section>h2 {
margin: 0;
padding: 12px 24px;
font-size: 16px;
background: #eceeee;
text-transform: uppercase;
}
section>p {
margin: 0;
padding: 12px 24px;
background: #fafafa;
}
.container {
display: flex;
flex-wrap: wrap;
}
main {
flex-basis: 100%;
}
.sidebar {
padding: 0 2em;
background: #fbf6f4;
}
#media screen and (min-width: 1024px) {
.container {
flex-wrap: nowrap;
}
main {
flex: 1 1 70%;
}
.sidebar {
flex: 0 0 30%;
margin-left: 2em;
}
}
<div class="container">
<main>
<h1>Main</h1>
<section>
<h2>Section</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa eaque hic voluptates quas minus minima, officiis, quaerat animi illum dolor est ipsum maiores sunt sint, velit consequatur illo perspiciatis magni!
</p>
</section>
<section>
<h2>Section</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum placeat animi illum, a cumque ab illo soluta saepe dicta, deleniti voluptatibus ratione modi pariatur laudantium, nulla libero earum, ea molestias.
</p>
</section>
<section>
<h2>Section</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem sapiente labore eos quia assumenda quod perspiciatis odio sit, hic incidunt, eum, inventore qui veniam ex iure voluptatum deleniti accusamus quidem.
</p>
</section>
<section>
<h2>Section</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint, quasi laudantium neque, dolor illo repellat totam fugiat veritatis sit harum, quam asperiores error minima ducimus id. Repellat ea, omnis veniam.
</p>
</section>
<section>
<h2>Section</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste vel harum, ratione voluptas qui odit ea ipsum ipsa distinctio laborum? Ut voluptate, accusantium alias, autem hic dignissimos corporis quas cum!
</p>
</section>
<section>
<h2>Section</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum praesentium, aut! Nam officiis tempora reprehenderit, dignissimos minus voluptatum ullam. Doloremque quis dolorem tempora incidunt maiores iusto similique cumque atque repellendus?
</p>
</section>
<section>
<h2>Section</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est ab fugit repellendus exercitationem, incidunt perspiciatis, accusamus deserunt dolores molestias odio tenetur iure nesciunt! Officiis debitis, cumque impedit odit vero earum.
</p>
</section>
<section>
<h2>Section</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores ratione doloribus repellat molestias dolorum quae, iste, quo corrupti impedit consequuntur quod ex magnam recusandae dolorem dignissimos incidunt, ducimus, quia ipsum.
</p>
</section>
</main>
<div class="sidebar">
<h1>Sidebar</h1>
<section>
<h2>Section</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam deleniti officia nobis atque voluptatum maxime voluptas ipsum rerum accusantium repudiandae quae quia, quam quis. Consectetur dolorem excepturi assumenda reprehenderit accusantium.
</p>
</section>
<section>
<h2>Section</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos ab laborum numquam dolore eius, aperiam amet cumque. Laboriosam aut at cupiditate quis ea blanditiis eveniet, dolorum. Autem at, quisquam dolorem.
</p>
</section>
</div>
</div>
Note there is wasted space below the sidebar. I want the main content to wrap around and take up the full width after the sidebar ends, but I'm not sure how to achieve that.
I thought about using float: right on the sidebar and putting it before the <main>, but that results in the sidebar appearing first on mobile (I want it to appear after the content).
Is there a way to achieve the desired layout given the above requirements, either using flexbox, float, or some other technique?

you can switch display and order with float. In order to use float you will need aside being first in HTML, so content can wrap around. flex and order will send it back to bottom on mobile.
Example or snippet below with HTML update to switch from a flex layout to a float layout
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
padding: 0 2em;
line-height: 1.4rem;
color: #ddd;
background-color: #333
}
section {
color:#333;
margin: 1.6em 0;
}
section > h2 {
margin: 0;
padding: 12px 24px;
font-size: 16px;
background: #ace;
text-transform: uppercase;
}
section > p {
margin: 0;
padding: 12px 24px;
background: #fafafa;
}
.container {
overflow:hidden;
}
main {
display:flex;
flex-direction:column;
}
.sidebar {
padding: 0 2em;
background: tomato;
order:2;
}
#media screen and (min-width: 1024px) {
.container {
}
main {
display:block;
}
main h1 {
float:left;
width:70%;
}
main section {
clear:left;
overflow:hidden;
}
.sidebar {
width:25%;
float:right;
margin-left:2em;
}
}
<div class="container">
<main>
<h1>Main</h1>
<aside class="sidebar">
<h1>Sidebar</h1>
<section>
<h2>Section</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam deleniti officia nobis atque voluptatum maxime voluptas ipsum rerum accusantium repudiandae quae quia, quam quis. Consectetur dolorem excepturi assumenda reprehenderit accusantium.
</p>
</section>
<section>
<h2>Section</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos ab laborum numquam dolore eius, aperiam amet cumque. Laboriosam aut at cupiditate quis ea blanditiis eveniet, dolorum. Autem at, quisquam dolorem.
</p>
</section>
</aside>
<section>
<h2>Section</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa eaque hic voluptates quas minus minima, officiis, quaerat animi illum dolor est ipsum maiores sunt sint, velit consequatur illo perspiciatis magni!
</p>
</section>
<section>
<h2>Section</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum placeat animi illum, a cumque ab illo soluta saepe dicta, deleniti voluptatibus ratione modi pariatur laudantium, nulla libero earum, ea molestias.
</p>
</section>
<section>
<h2>Section</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem sapiente labore eos quia assumenda quod perspiciatis odio sit, hic incidunt, eum, inventore qui veniam ex iure voluptatum deleniti accusamus quidem.
</p>
</section>
<section>
<h2>Section</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint, quasi laudantium neque, dolor illo repellat totam fugiat veritatis sit harum, quam asperiores error minima ducimus id. Repellat ea, omnis veniam.
</p>
</section>
<section>
<h2>Section</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste vel harum, ratione voluptas qui odit ea ipsum ipsa distinctio laborum? Ut voluptate, accusantium alias, autem hic dignissimos corporis quas cum!
</p>
</section>
<section>
<h2>Section</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum praesentium, aut! Nam officiis tempora reprehenderit, dignissimos minus voluptatum ullam. Doloremque quis dolorem tempora incidunt maiores iusto similique cumque atque repellendus?
</p>
</section>
<section>
<h2>Section</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est ab fugit repellendus exercitationem, incidunt perspiciatis, accusamus deserunt dolores molestias odio tenetur iure nesciunt! Officiis debitis, cumque impedit odit vero earum.
</p>
</section>
<section>
<h2>Section</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores ratione doloribus repellat molestias dolorum quae, iste, quo corrupti impedit consequuntur quod ex magnam recusandae dolorem dignissimos incidunt, ducimus, quia ipsum.
</p>
</section>
</main>
</div>

Updated
Thanks to G-Cyr, who put me in another direction, there is actually a Flexbox/Float combination, making the section flex column containers, which appear to respect the floated element and wrap around it.
All it takes is to add display: flex; flex-direction: column; to the section rule...and it even work with IE11 :)
Fiddle demo
Stack snippet
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
padding: 0 2em;
line-height: 1.4;
color: #333;
background-color: #fff
}
section {
display: flex; /* added */
flex-direction: column; /* added */
margin: 1.6em 0;
}
section > h2 {
margin: 0;
padding: 12px 24px;
font-size: 16px;
background: #eceeee;
text-transform: uppercase;
}
section > p {
margin: 0;
padding: 12px 24px;
background: #fafafa;
}
.container {
display: flex;
flex-wrap: wrap;
}
main {
flex-basis: 100%;
}
.sidebar {
order: 1;
padding: 0 2em;
background: #fbf6f4;
}
#media screen and (min-width: 1024px) {
.container {
display: block;
}
.sidebar {
float: right;
width: 30%;
margin: 0 2em;
}
}
<div class="container">
<div class="sidebar">
<h1>Sidebar</h1>
<section>
<h2>Section</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam deleniti officia nobis atque voluptatum maxime voluptas ipsum rerum accusantium repudiandae quae quia, quam quis. Consectetur dolorem excepturi assumenda reprehenderit accusantium.
</p>
</section>
<section>
<h2>Section</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos ab laborum numquam dolore eius, aperiam amet cumque. Laboriosam aut at cupiditate quis ea blanditiis eveniet, dolorum. Autem at, quisquam dolorem.
</p>
</section>
</div>
<main>
<h1>Main</h1>
<section>
<h2>Section</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa eaque hic voluptates quas minus minima, officiis, quaerat animi illum dolor est ipsum maiores sunt sint, velit consequatur illo perspiciatis magni!
</p>
</section>
<section>
<h2>Section</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum placeat animi illum, a cumque ab illo soluta saepe dicta, deleniti voluptatibus ratione modi pariatur laudantium, nulla libero earum, ea molestias.
</p>
</section>
<section>
<h2>Section</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem sapiente labore eos quia assumenda quod perspiciatis odio sit, hic incidunt, eum, inventore qui veniam ex iure voluptatum deleniti accusamus quidem.
</p>
</section>
<section>
<h2>Section</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint, quasi laudantium neque, dolor illo repellat totam fugiat veritatis sit harum, quam asperiores error minima ducimus id. Repellat ea, omnis veniam.
</p>
</section>
<section>
<h2>Section</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste vel harum, ratione voluptas qui odit ea ipsum ipsa distinctio laborum? Ut voluptate, accusantium alias, autem hic dignissimos corporis quas cum!
</p>
</section>
<section>
<h2>Section</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum praesentium, aut! Nam officiis tempora reprehenderit, dignissimos minus voluptatum ullam. Doloremque quis dolorem tempora incidunt maiores iusto similique cumque atque repellendus?
</p>
</section>
<section>
<h2>Section</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est ab fugit repellendus exercitationem, incidunt perspiciatis, accusamus deserunt dolores molestias odio tenetur iure nesciunt! Officiis debitis, cumque impedit odit vero earum.
</p>
</section>
<section>
<h2>Section</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores ratione doloribus repellat molestias dolorum quae, iste, quo corrupti impedit consequuntur quod ex magnam recusandae dolorem dignissimos incidunt, ducimus, quia ipsum.
</p>
</section>
</main>
</div>
And by putting the h2 and the p in a section of their own, also the p by itself will wrap around the floated element
Fiddle demo 2
Stack snippet 2
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
padding: 0 2em;
line-height: 1.4;
color: #333;
background-color: #fff
}
section {
display: flex; /* added */
flex-direction: column; /* added */
}
section:nth-child(2n+2) { /* added */
margin-top: 1.6em;
}
section > h2 {
margin: 0;
padding: 12px 24px;
font-size: 16px;
background: #eceeee;
text-transform: uppercase;
}
section > p {
margin: 0;
padding: 12px 24px;
background: #fafafa;
}
.container {
display: flex;
flex-wrap: wrap;
}
main {
flex-basis: 100%;
}
.sidebar {
order: 1;
padding: 0 2em;
background: #fbf6f4;
}
#media screen and (min-width: 1024px) {
.container {
display: block;
}
.sidebar {
float: right;
width: 30%;
margin: 0 2em;
}
}
<div class="container">
<div class="sidebar">
<h1>Sidebar</h1>
<section>
<h2>Section</h2>
</section>
<section>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</p>
</section>
<section>
<h2>Section</h2>
</section>
<section>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos ab laborum numquam dolore eius, aperiam amet cumque. Laboriosam aut at cupiditate quis ea blanditiis eveniet, dolorum.
</p>
</section>
</div>
<main>
<h1>Main</h1>
<section>
<h2>Section</h2>
</section>
<section>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa eaque hic voluptates quas minus minima, officiis, quaerat animi illum dolor est ipsum maiores sunt sint, velit consequatur illo perspiciatis magni!
</p>
</section>
<section>
<h2>Section</h2>
</section>
<section>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum placeat animi illum, a cumque ab illo soluta saepe dicta, deleniti voluptatibus ratione modi pariatur laudantium, nulla libero earum, ea molestias.
</p>
</section>
<section>
<h2>Section</h2>
</section>
<section>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem sapiente labore eos quia assumenda quod perspiciatis odio sit, hic incidunt, eum, inventore qui veniam ex iure voluptatum deleniti accusamus quidem.
</p>
</section>
<section>
<h2>Section</h2>
</section>
<section>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint, quasi laudantium neque, dolor illo repellat totam fugiat veritatis sit harum, quam asperiores error minima ducimus id. Repellat ea, omnis veniam.
</p>
</section>
<section>
<h2>Section</h2>
</section>
<section>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste vel harum, ratione voluptas qui odit ea ipsum ipsa distinctio laborum? Ut voluptate, accusantium alias, autem hic dignissimos corporis quas cum!
</p>
</section>
<section>
<h2>Section</h2>
</section>
<section>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum praesentium, aut! Nam officiis tempora reprehenderit, dignissimos minus voluptatum ullam. Doloremque quis dolorem tempora incidunt maiores iusto similique cumque atque repellendus?
</p>
</section>
<section>
<h2>Section</h2>
</section>
<section>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est ab fugit repellendus exercitationem, incidunt perspiciatis, accusamus deserunt dolores molestias odio tenetur iure nesciunt! Officiis debitis, cumque impedit odit vero earum.
</p>
</section>
<section>
<h2>Section</h2>
</section>
<section>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores ratione doloribus repellat molestias dolorum quae, iste, quo corrupti impedit consequuntur quod ex magnam recusandae dolorem dignissimos incidunt, ducimus, quia ipsum.
</p>
</section>
</main>
</div>
Short answer is "No, that won't be possible using Flexbox".
inline elements though, they will wrap around a floated element.
With that inline elements we can accomplish something that is similar, which it has some drawbacks though, where the difficult part is to have the background color fill the available space, so here is how it could look like w/o.
See the notes in the CSS
Fiddle demo
Stack snippet
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
padding: 0 2em;
line-height: 1.4;
color: #333;
background-color: #fff
}
section {
display: inline; /* changed display type */
/*margin: 1.6em 0;*/ /* have no effect on inline element */
}
section > h2 {
display: inline; /* changed display type */
/*margin: 0;*/ /* have no effect on inline element */
padding: 12px 24px;
font-size: 16px;
background: #eceeee;
text-transform: uppercase;
}
section > p {
display: inline; /* changed display type */
/*margin: 0;*/ /* have no effect on inline element */
/*padding: 12px 24px;*/ /* won't work properly on
multiline inline element */
/*background: #fafafa;*/ /* removed as it does not look good */
}
section > p::before,
section > p::after {
content:"\A\A"; /* create 2 line break's */
white-space: pre; /* or pre-wrap */
}
.container {
display: flex;
flex-wrap: wrap;
}
main {
flex-basis: 100%;
}
.sidebar {
order: 1;
padding: 0 2em;
background: #fbf6f4;
}
#media screen and (min-width: 1024px) {
.container {
display: block;
}
.sidebar {
float: right;
width: 30%;
margin: 0 2em;
}
}
<div class="container">
<div class="sidebar">
<h1>Sidebar</h1>
<section>
<h2>Section</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam deleniti officia nobis atque voluptatum maxime voluptas ipsum rerum accusantium repudiandae quae quia, quam quis. Consectetur dolorem excepturi assumenda reprehenderit accusantium.
</p>
</section>
<section>
<h2>Section</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos ab laborum numquam dolore eius, aperiam amet cumque. Laboriosam aut at cupiditate quis ea blanditiis eveniet, dolorum. Autem at, quisquam dolorem.
</p>
</section>
</div>
<main>
<h1>Main</h1>
<section>
<h2>Section</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa eaque hic voluptates quas minus minima, officiis, quaerat animi illum dolor est ipsum maiores sunt sint, velit consequatur illo perspiciatis magni!
</p>
</section>
<section>
<h2>Section</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum placeat animi illum, a cumque ab illo soluta saepe dicta, deleniti voluptatibus ratione modi pariatur laudantium, nulla libero earum, ea molestias.
</p>
</section>
<section>
<h2>Section</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem sapiente labore eos quia assumenda quod perspiciatis odio sit, hic incidunt, eum, inventore qui veniam ex iure voluptatum deleniti accusamus quidem.
</p>
</section>
<section>
<h2>Section</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint, quasi laudantium neque, dolor illo repellat totam fugiat veritatis sit harum, quam asperiores error minima ducimus id. Repellat ea, omnis veniam.
</p>
</section>
<section>
<h2>Section</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste vel harum, ratione voluptas qui odit ea ipsum ipsa distinctio laborum? Ut voluptate, accusantium alias, autem hic dignissimos corporis quas cum!
</p>
</section>
<section>
<h2>Section</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum praesentium, aut! Nam officiis tempora reprehenderit, dignissimos minus voluptatum ullam. Doloremque quis dolorem tempora incidunt maiores iusto similique cumque atque repellendus?
</p>
</section>
<section>
<h2>Section</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est ab fugit repellendus exercitationem, incidunt perspiciatis, accusamus deserunt dolores molestias odio tenetur iure nesciunt! Officiis debitis, cumque impedit odit vero earum.
</p>
</section>
<section>
<h2>Section</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores ratione doloribus repellat molestias dolorum quae, iste, quo corrupti impedit consequuntur quod ex magnam recusandae dolorem dignissimos incidunt, ducimus, quia ipsum.
</p>
</section>
</main>
</div>

How to have two different custom scrollbar on one page?

So what I am trying to have is a different scrollbar for the scrollable div and a different one for the whole window. This is what I have tried to do but I haven't been able to get two different colour scroll bar.
*{
margin: 0;
padding: 0;
font-family: 'segoe ui light';
}
header{
width: 100%;
height: 300px;
background: #efefef;
}
.container{
width: 90%;
margin: auto;
}
h1{
padding: 20px 0;
font-size: 45px;
font-family: 'segoe ui light';
text-align: center;
}
h2{
font-size: 35px;
padding: 10px 0 20px 20px;
}
figure{
top: 0;
width: 400px;
height: 500px;
padding: 0px 0px 0px 125px;
}
img{
width: 100%;
height: 100%;
}
.section{
padding: 50px 0;
height: 500px;
-webkit-column-count: 2;
-webkit-column-gap:20px;
}
.intro{
font-weight: 1000;
}
.content{
max-height: 250px;
overflow-y: scroll;
overflow-x:hidden;
}
/******************SCROLL BAR***********************/
::-webkit-scrollbar {
width: 10px;
}
::-webkit-scrollbar-track {
opacity: 0;
background-color: #d2edda;
//-border-radius: 10px;
}
::-webkit-scrollbar-thumb {
-webkit-border-radius: 10px;
border-radius: 10px;
background: #0b602f;
}
::selection {
color: white;
background: #13DA69;
}
<html>
<head>
<link rel="stylesheet" href="..//css/interview.css">
</head>
<body>
<header></header>
<div class="container">
<h1>INTERVIEW</h1>
<div class="section one">
<h2>Name</h2>
<div class="intro">
<b> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus laboriosam quia, dolores impedit autem consequuntur eaque sed harum adipisci quos voluptas, maxime ducimus nemo id et excepturi temporibus, <br>perspiciatis reprehenderit.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem sed aut dolore magni corrupti. Debitis minus officiis magni, laborum! Unde impedit similique delectus voluptatibus necessitatibus a atque, debitis dolores nulla.</b>
</div>
<br>
<br>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi laboriosam enim maiores placeat, ullam explicabo magnam. Quam repudiandae fugiat, incidunt explicabo quis amet cupiditate quos dolores tempore maxime distinctio inventore.
<br>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate debitis, a saepe eius laboriosam hic incidunt eum ipsam fugiat necessitatibus modi accusantium dignissimos doloribus, adipisci voluptas alias harum molestias officia!
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi laboriosam enim maiores placeat, ullam explicabo magnam. Quam repudiandae fugiat, incidunt explicabo quis amet cupiditate quos dolores tempore maxime distinctio inventore.
<br>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate debitis, a saepe eius laboriosam hic incidunt eum ipsam fugiat necessitatibus modi accusantium dignissimos doloribus, adipisci voluptas alias harum molestias officia!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi laboriosam enim maiores placeat, ullam explicabo magnam. Quam repudiandae fugiat, incidunt explicabo quis amet cupiditate quos dolores tempore maxime distinctio inventore.
<br>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate debitis, a saepe eius laboriosam hic incidunt eum ipsam fugiat necessitatibus modi accusantium dignissimos doloribus, adipisci voluptas alias harum molestias officia!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi laboriosam enim maiores placeat, ullam explicabo magnam. Quam repudiandae fugiat, incidunt explicabo quis amet cupiditate quos dolores tempore maxime distinctio inventore.
<br>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate debitis, a saepe eius laboriosam hic incidunt eum ipsam fugiat necessitatibus modi accusantium dignissimos doloribus, adipisci voluptas alias harum molestias officia!</p>
</div>
<figure>
<img src="" alt="insert img here">
</figure>
</div>
</div>
</body>
</html>
So a different scrollbar for the div and a different scrollbar for the window is required.

Just like with any CSS selector, you simply need to apply the various ::-webkit-scrollbar pseudo-elements to the div element itself by specifying this within the selector:
/* This styles any scrollbar. */
::-webkit-scrollbar {
...
}
/* This styles any scrollbar which is part of a `div` element. */
div::-webkit-scrollbar {
...
}
*{
margin: 0;
padding: 0;
font-family: 'segoe ui light';
}
header{
width: 100%;
height: 300px;
background: #efefef;
}
.container{
width: 90%;
margin: auto;
}
h1{
padding: 20px 0;
font-size: 45px;
font-family: 'segoe ui light';
text-align: center;
}
h2{
font-size: 35px;
padding: 10px 0 20px 20px;
}
figure{
top: 0;
width: 400px;
height: 500px;
padding: 0px 0px 0px 125px;
}
img{
width: 100%;
height: 100%;
}
.section{
padding: 50px 0;
height: 500px;
-webkit-column-count: 2;
-webkit-column-gap:20px;
}
.intro{
font-weight: 1000;
}
.content{
max-height: 250px;
overflow-y: scroll;
overflow-x:hidden;
}
/******************SCROLL BAR***********************/
::-webkit-scrollbar {
width: 10px;
}
::-webkit-scrollbar-track {
opacity: 0;
background-color: #d2edda;
//-border-radius: 10px;
}
::-webkit-scrollbar-thumb {
-webkit-border-radius: 10px;
border-radius: 10px;
background: #0b602f;
}
div::-webkit-scrollbar-track {
background-color: red;
}
div::-webkit-scrollbar-thumb {
-webkit-border-radius: 10px;
background: purple;
}
::selection {
color: white;
background: #13DA69;
}
<html>
<head>
<link rel="stylesheet" href="..//css/interview.css">
</head>
<body>
<header></header>
<div class="container">
<h1>INTERVIEW</h1>
<div class="section one">
<h2>Name</h2>
<div class="intro">
<b> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus laboriosam quia, dolores impedit autem consequuntur eaque sed harum adipisci quos voluptas, maxime ducimus nemo id et excepturi temporibus, <br>perspiciatis reprehenderit.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem sed aut dolore magni corrupti. Debitis minus officiis magni, laborum! Unde impedit similique delectus voluptatibus necessitatibus a atque, debitis dolores nulla.</b>
</div>
<br>
<br>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi laboriosam enim maiores placeat, ullam explicabo magnam. Quam repudiandae fugiat, incidunt explicabo quis amet cupiditate quos dolores tempore maxime distinctio inventore.
<br>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate debitis, a saepe eius laboriosam hic incidunt eum ipsam fugiat necessitatibus modi accusantium dignissimos doloribus, adipisci voluptas alias harum molestias officia!
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi laboriosam enim maiores placeat, ullam explicabo magnam. Quam repudiandae fugiat, incidunt explicabo quis amet cupiditate quos dolores tempore maxime distinctio inventore.
<br>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate debitis, a saepe eius laboriosam hic incidunt eum ipsam fugiat necessitatibus modi accusantium dignissimos doloribus, adipisci voluptas alias harum molestias officia!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi laboriosam enim maiores placeat, ullam explicabo magnam. Quam repudiandae fugiat, incidunt explicabo quis amet cupiditate quos dolores tempore maxime distinctio inventore.
<br>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate debitis, a saepe eius laboriosam hic incidunt eum ipsam fugiat necessitatibus modi accusantium dignissimos doloribus, adipisci voluptas alias harum molestias officia!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi laboriosam enim maiores placeat, ullam explicabo magnam. Quam repudiandae fugiat, incidunt explicabo quis amet cupiditate quos dolores tempore maxime distinctio inventore.
<br>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate debitis, a saepe eius laboriosam hic incidunt eum ipsam fugiat necessitatibus modi accusantium dignissimos doloribus, adipisci voluptas alias harum molestias officia!</p>
</div>
<figure>
<img src="" alt="insert img here">
</figure>
</div>
</div>
</body>
</html>