Question

I have a DIV that I want to be scrollable, but the problem is that I’m using position: fixed; and the DIV doesn’t adjust it’s position with the rest of the page; thus disappearing on small resolutions. Any suggestions would be wonderful.

Here’s the current DIV:

<div style="
display: block; 
top: 200px; 
left: 1500px; 
width: 130px; 
position: fixed; 
border: 1px solid rgb(136, 136, 136); 
padding: 10px; 
text-align: center; 
font-weight: bold; 
color: rgb(255, 255, 255); 
background-color:#FFFFFF;
">

Answer 1

Instead of using pixels for top and left properties use percentages.eg:top:20% instead of top:1200px. In smaller resolutions your top left values makes your div go out of the screen. Try this

display: block; 
top: xx%; 
left: nn%; 
width: mm%; 
position: fixed; 
border: 1px solid rgb(136, 136, 136); 
padding: 10px; 
text-align: center; 
font-weight: bold; 
color: rgb(255, 255, 255); 
background-color:#FFFFFF;

According to your dives sizes adjust your percentage values.
One side note If you are targeting mobile devices you can use media queries too eg.

@media all and (max-width: 699px) and (min-width: 520px), (min-width: 1151px) {
  #myDivId{
   width: 100px; /* or width:10%; */
  }
}