Two divs, one scrolls, other static

Question

I'm creating a blog website with the top part displaying the most recent posts, and below that is the part that displays all the blog posts. I have the most recent posts along side another div that will show most popular posts, social icons, etc. What I want to happen is to have the sidebar stay static alongside the most recent posts, and to have the recent posts scrollable. The code I have causes the sidebar to completely disappear. When I take the section out to debug it along with the CSS, everything works perfectly. When I put it back all together, the sidebar disappears again.

Here is the relevant code that works by itself:

/* relevant css */

.wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  margin: auto;
  padding: 0;
}

.maincontent {
  top: 0;
  left: 0;
  width: 80%;
  height: 100%;
}

.sidebar {
  position: fixed;
  float: right;
  /*top: 200px;*/
  left: 80%;
  width: 20%;
  height: 100%;
  z-index: 999;
  padding: 5px;
}


/* =============================================================================
	INDEX > RECENT POSTS
============================================================================= */

.description {
  text-align: justify;
}

.items .item .category2 {
  position: relative;
  margin-top: -10px;
  z-index: 2;
  margin-bottom: 20px;
  font: bold 18px/21px 'proxima_novasemibold';
}

.items .item .category2 a {
  display: inline-block;
  background: #B9B9C8;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 0 10px;
  text-decoration: none;
}

.items .item .category2 a:hover {
  color: #ffff00;
  text-decoration: none;
}

.social li a:hover {
  color: #FFFF00;
}

.social {
  text-align: center;
  padding-left: 0;
  margin-left: -5px;
  list-style: none;
}

.socialheading {
  font-weight: bold;
  display: inline-block;
  letter-spacing: -2px;
  padding-right: 15px;
}

.social>li {
  display: inline-block;
  padding-right: 1px;
  padding-left: 1px;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<!-- relevant HTML -->
<div class="wrapper">
  <div class="w3-row-padding w3-container">
    <div class="w3-content w3-col l9 maincontent">
      <div class="w3-row-padding w3-panel" onclick="javascript:window.location.href=''">
        <div class="items">
          <div class="w3-col l5">
            <div class="item">
              <div class="image">
                <a href="post.php?id=3&title=fightlikeagirl"><img src="http://via.placeholder.com/350x150" class="w3-image"></a>
              </div>
              <div class="category2">
                <a href="#">WELLNESS</a>
              </div>
            </div>
          </div>
          <div class="w3-col l7">
            <h3>TITLE</h3>
            <p class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus condimentum sed arcu vel dignissim. Cras fermentum ullamcorper libero, non finibus ante rhoncus id. Nullam condimentum ornare neque, vitae vestibulum libero dignissim ut. Donec
              aliquam justo pretium, tempor libero vulputate, ultrices arcu</p>
            <p><a href="">read more</a></p>
          </div>
        </div>
      </div>
      <hr>

      <div class="w3-row-padding w3-panel" onclick="javascript:window.location.href=''">
        <div class="items">
          <div class="w3-col l5">
            <div class="item">
              <div class="image">
                <a href="post.php?id=3&title=fightlikeagirl"><img src="http://via.placeholder.com/350x150" class="w3-image"></a>
              </div>
              <div class="category2">
                <a href="#">WELLNESS</a>
              </div>
            </div>
          </div>
          <div class="w3-col l7">
            <h3>TITLE</h3>
            <p class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus condimentum sed arcu vel dignissim. Cras fermentum ullamcorper libero, non finibus ante rhoncus id. Nullam condimentum ornare neque, vitae vestibulum libero dignissim ut. Donec
              aliquam justo pretium, tempor libero vulputate, ultrices arcu</p>
            <p><a href="">read more</a></p>
          </div>
        </div>
      </div>
      <hr>
    </div>

    <div class="w3-col l3 sidebar">
      <ul class="social">
        <p class="socialheading">KEEP IN TOUCH </p>
        <li><a href="" target="_blank"><span class="fa fa-facebook" aria-hidden="true"></span></a></li>
        <li><a href="" target="_blank"><span class="fa fa-instagram" aria-hidden="true"></span></a> </li>
        <li><a href="" target="_blank"><span class="fa fa-twitter" aria-hidden="true"></span></a></li>
        <li><a href="" target="_blank"><span class="fa fa-pinterest-p" aria-hidden="true"></span></a></li>
        <li><a href="" target="_blank"><span class="fa fa-linkedin" aria-hidden="true"></span></a></li>
        <li><a href="" target="_blank"><span class="fa fa-youtube-play" aria-hidden="true"></i></a></li>
      </ul>
      <hr>
      <p class="socialheading">MOST POPULAR POSTS</p>
    </div>
  </div>
</div>

Here is a codepen of everything put together and not working.

Answer 1

Try This CSS for sidebar When it is positioned fixed make use of right:0 property instead of left:80% and use bottom:0

CSS

.sidebar {
        position: sticky;
float: right;
right: 0%;
width: 20%;
bottom: 0;
height: 50%;
z-index: 999;
padding: 5px;
top: 0;
}

Style Accordingly.

Hope this helps..

Answer 2

Posting an example to get the same

check the fiddle to better understand

fiddle

body,
html {
  height: 100%;
  padding: 0;
  margin: 0;
}

.box {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
}

.one {
  height: 300px;
  flex: 1 0 70%;
  background: tomato;
  overflow: auto;
}

.two {
  flex: 1 0 30%;
  background: green;
}

<div class="box">
  <div class="one">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio quis velit, maiores quibusdam, odit obcaecati, ab repellendus vero nobis, beatae fugiat! Perferendis nulla, nisi, voluptatum sequi quasi asperiores nam praesentium?<br><br> Lorem
    ipsum dolor sit amet, consectetur adipisicing elit. Ullam fugit deleniti eum numquam eos, quisquam ducimus earum, sequi ad itaque cum quibusdam. Odit laudantium placeat perspiciatis voluptates dignissimos nulla excepturi.
    <br><br> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam fugit deleniti eum numquam eos, quisquam ducimus earum, sequi ad itaque cum quibusdam. Odit laudantium placeat perspiciatis voluptates dignissimos nulla excepturi.
    <br><br> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam fugit deleniti eum numquam eos, quisquam ducimus earum, sequi ad itaque cum quibusdam. Odit laudantium placeat perspiciatis voluptates dignissimos nulla excepturi.
  </div>
  <div class="two">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum repellendus numquam eum debitis. Quas iure quos, in placeat illo laudantium dignissimos officiis temporibus quibusdam fugit voluptatibus dicta provident ab impedit.
  </div>
</div>

Answer 3

You need to add top to the sidebar (you already had one, but you commented it), then the sidebar is there and fixed, with top, left, right and bottom (just two values needed) you can fix the position