Unfixed div overlapping fixed div on bootstrap 3

Question

I currently have my layout page divided into two columns using bootstrap 3 with something similar to this.

<div class="row">
  <div class="col-md-4 info">
    <!--some Markup -->
  </div>

  <div class = "col-md-8 tasks-column">
    <!--some Markup -->
  </div> 
</div> 

I want the div with class "info" to stay fixed on the top left side when scrolling the page. When I try the bootstrap "affix" class the content in "info" effectively gets fixed but the "tasks-column" suddenly moves all the way to the left completely covering it. I have also tried the plain css position:fixed; on "info" but it does not do anything. The content in info is NOT a navigation panel. Thank you guys.

Edit: the content in info is dynamic (it varies depending on the user input).

Answer 1

You need to offset the tasks-column. Try this.

<div class="row">
   <div class="col-md-4 info">
       <!--some Markup -->
   </div>

   <div class = "col-md-8 col-md-offset-4 tasks-column">
       <!--some Markup -->
   </div> 

Answer 2

This is because you are fixing the content that pushes "tasks-column" to the right. The simple way to do what you want is just to move "info" inside col-md-4, like this:

<div class="row">
    <div class="col-md-4">
        <div class="info">
            <!--some fixed Markup -->
        </div>
    </div>

    <div class="col-md-8 tasks-column">
         <!--some Markup -->
    </div> 
</div> 

Hope this helps!