CODEWITHSUNDEEP
htmlcsstwitter-bootstrap-3
La Murga
La Murga

Reputation: 303

Unfixed div overlapping fixed div on bootstrap 3

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

Upvotes: 1

Views: 868

Answers (2)

Trucktech
Trucktech

Reputation: 358

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>

Upvotes: 3

Bj&#248;rn Nyborg
Bj&#248;rn Nyborg

Reputation: 993

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!

Upvotes: 0

Related Questions