1

I use right sidebar with container class 

<div class="container">
<div class="col-8 col-md-8 col-sm-6">
main contents
</div>
<div class="col-4 col-md-4 col-sm-6 sidebar ">
side bar
</div>

Then make the right bar stick to the right side with this css.

However, it sticks to the right side of browser.

I want to stick to the right side of container width.

Is it possible?

  .sidebar {
    position: fixed;
    top:0px;
    right:0px;
    display: block;
    overflow-x: hidden;
    overflow-y: auto
  }
Nikhil
  • 6,493
  • 10
  • 31
  • 68
whitebear
  • 11,200
  • 24
  • 114
  • 237
  • 2
    An element with `position: fixed;` is positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled. The top, right, bottom, and left properties are used to position the element. You could use media queries to match the change in the right gap between the viewport and the container, or use jQuery to calculate the distances it needs to be fixed and update the `right` property responsively. Like this but horizontal: https://stackoverflow.com/questions/51174427/fixed-position-element-inside-div-container-only – Karl Oct 09 '19 at 14:53
  • If you want to have the sidebar stay fixed next to the left side as you scroll, you will need to use JS. – disinfor Oct 09 '19 at 15:55
  • Thanks very much. I understood the basic concept. So what I should do is to get the blank width between the left browser edge and left pain. – whitebear Oct 09 '19 at 16:56

1 Answers1

-2

I don't think I understood exactly what you want. However, your code will not work properly because you didn't wrap your columns into a row. Try the following and see if it is what you want:

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
    <div class="row">
        <div class="col-8 col-md-8 col-sm-6">
            main contents
        </div>
        <div class="col-4 col-md-4 col-sm-6">
            side bar
        </div>
    </div>
</div>

That way, you don't need to use a custom class to "stick" it to the right of the container.

Lucas Arbex
  • 889
  • 1
  • 7
  • 15