Page Content Appearing below Sidebar [Solved]

Are facing an issue with page content appearing below sidebar?

This is a very common issue you will face during website development.

I was developing a website using Bootstrap where I have to display a sidebar on the left and content on the right. I faced a similar issue.

Here is a simple solution I used to fix this issue. Sharing it with you.

Let’s say you have the below HTML content with the bootstrap tags.

<div class="col-lg-8 col-md-12 order-md-2 order-lg-2 content">
  <div class="row">
    <div class="col-lg-4 col-md-12 sidebar">sidebar</div>
    <div class="col-lg-8 col-md-12 order-md-2 order-lg-2 content">content</div>
  </div>
</div>

You don’t need to modify anything in HTML. Just add a few lines of CSS code as mentioned below and it will work like magic.

.container {
    position: relative;
}
.blog-details-area .content {
    margin-left: 350px;
}
.blog-details-area .sidebar {
    position: absolute;
}

You can adjust the left margin of the content as required.

Remember, this solution has nothing to do with the bootstrap. It will work even if you are using Bootstrap or not.

Related: You can also change the order of the bootstrap columns. Suppose you want to show the right sidebar to the left side of the content, you can achieve this with the special bootstrap class tag.

Aniruddha Chaudhari

I am a Python enthusiast who loves Linux and Vim. I hold a Master of Computer Science degree from NIT Trichy and have 10 years of experience in the IT industry, focusing on the Software Development Lifecycle from Requirements Gathering, Design, Development to Deployment. I have worked at IBM, Ericsson, and NetApp, and I share my knowledge on CSEstack.org.