xxdash xxdash - 3 years ago 99
CSS Question

Two divs, one scrolls, other static

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 Source

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..

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download