I encountered an issue while developing a reddit clone.
Just to clarify, I'm using bootstrap v5.0
The problem arises when trying to position the sidebar on the right and the content on the left. The layout seems fine at first, but the content section ends up taking up the space allocated for the sidebar and pushing it down.
https://i.sstatic.net/zABpV.png
Below is the code snippet:
<div>
<div class="container" style="margin-top: 80px;">
<div class="posts jumbotron">
<div class="post">
<h3 class="post-heading"><a href="#">Lorem</a></h3>
<p class="post-content">Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus maxime odio soluta eveniet, illum rem corporis minima velit quam voluptatibus earum quae quibusdam aut molestias? Consequuntur quibusdam odio culpa delectus!</p>
<hr style="height: 3px; margin-top: 30px;">
<br><br>
</div>
<div class="post">
<h3 class="post-heading"><a href="#">Lorem</a></h3>
<p class="post-content">Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus maxime odio soluta eveniet, illum rem corporis minima velit quam voluptatibus earum quae quibusdam aut molestias? Consequuntur quibusdam odio culpa delectus!</p>
<hr style="height: 3px; margin-top: 30px;">
<br><br>
</div>
</div>
</div>
<!-- Sidebar -->
<div class="sidebar jumbotron">
<h3 class="brand">Joined subreddits</h3>
<br><br>
<p style="margin-top: 20px; margin-bottom: 20px;"><a href="#" class="sidebar-link">Some text</a><p>
<hr>
<p style="margin-top: 20px; margin-bottom: 20px;"><a href="#" class="sidebar-link">Some text</a><p>
<hr>
<p style="margin-top: 20px; margin-bottom: 20px;"><a href="#" class="sidebar-link">Some text</a><p>
<hr>
</div>
</div>
Here's the accompanying CSS:
.sidebar {
float: right;
padding: 50px;
box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
border-radius: 10px;
margin-right: 150px;
width: 20%;
}
.posts {
border: 1px solid gray;
width: 75%;
padding: 50px;
}