Overlapping divs when position: fixed of CSS is used, whilst using columns

Question

Okay, so I have this HTML layout which works on rows and columns. Something like this:

<div class="row">
    <div class="col-sm-2 col-lg-2 col-md-2">
         Some Code!
    </div>
    <div class="col-sm-10 col-lg-10 col-md-10">
         Some Code!
    </div>
</div>

In this, I want the first column to be fixed while the other one to freely scrollable. So I set the CSS property position to fixed. And this works just fine. But as soon as I try out the responsive design mode, The first column is completely overlapped by the second one. Any ideas as to how to solve this problem?

I actually found a very good answer here: https://stackoverflow.com/a/44266359/8312835 — Sanjay Shanbhag, Jul 25 '17 at 19:25

score 0 · Answer 1 · answered Jul 25 '17 at 05:19

.col-sm-2{  
    position:fixed;
    width:40%;
    background:green;
}

.col-sm-10{
    width:58%;
    background:red;
    float:right;
}

<div class="row">
    <div class="col-sm-2 col-lg-2 col-md-2">
         Some Code!
    </div>
    <div class="col-sm-10 col-lg-10 col-md-10">
         Some Code!</br>
         Some Code!</br>
         Some Code!</br>
         Some Code!</br>
         Some Code!</br>
         Some Code!</br>
         Some Code!</br>
         Some Code!</br>
         Some Code!</br>
         Some Code!</br>
         Some Code!</br>
         Some Code!</br>
         Some Code!</br>
         Some Code!</br>
         Some Code!</br>
         Some Code!</br>
         Some Code!</br>
         Some Code!</br>
         Some Code!</br>
         Some Code!</br>
         Some Code!</br>
         Some Code!</br>
         Some Code!</br>
         Some Code!</br>
         Some Code!</br>
         Some Code!</br>
         Some Code!</br>
         Some Code!</br>
         Some Code!</br>
         Some Code!</br>
         Some Code!</br>
         Some Code!</br>
         Some Code!</br>
         Some Code!</br>
         Some Code!</br>
         Some Code!</br>
         Some Code!</br>
         Some Code!</br>
         Some Code!</br>
         Some Code!</br>
         Some Code!</br>
         Some Code!</br>
         Some Code!</br>
         Some Code!</br>
         Some Code!</br>
         Some Code!</br>
         Some Code!</br>
         Some Code!</br>
         Some Code!</br>
         Some Code!</br>
         Some Code!</br>
         Some Code!</br>
         Some Code!</br>
         Some Code!</br>
         Some Code!</br>
         Some Code!</br>
         Some Code!</br>
         Some Code!</br>
         Some Code!</br>
         Some Code!</br>
         Some Code!</br>
         Some Code!</br>
         Some Code!</br>
         Some Code!</br>
         Some Code!</br>
         Some Code!</br>
         Some Code!</br>
         Some Code!</br>
         Some Code!</br>
         Some Code!</br>
         Some Code!</br>
         Some Code!</br>
    </div>
</div>

Overlapping divs when position: fixed of CSS is used, whilst using columns

1 Answers1