I have two div's on a page one on the left and the other on the right..the right div has many tag's which are generated dynamically, so this div has a horizontal scroll bar below it(overflow:auto). Now the height of this div is more than the visible page.So there is a vertical scroll bar at the right. So the user will have to scroll till the bottom of the page to get the horizontal scroll bar...So what i want is for the scroll bar to float on the bottom of the SCREEN and not the page, so that the user can always have access to the horizontal scroll bar.

I have two div's on a page one on the left and the other on the right..the right div has many tag's which are generated dynamically, so this div has a horizontal scroll bar below it(overflow:auto). Now the height of this div is more than the visible page.So there is a vertical scroll bar at the right. So the user will have to scroll till the bottom of the page to get the horizontal scroll bar...So what i want is for the scroll bar to float on the bottom of the SCREEN and not the page, so that the user can always have access to the horizontal scroll bar.

• javascript
• html
• css

• didnt quite get what you are trying to do, are you trying to create a custom scroll bar? show a Demo of your code – Ibu Commented Aug 4, 2011 at 16:55
• Could we get a website link, please? – Tom Hartman Commented Aug 4, 2011 at 17:13
• Don't make the height so high. You could try absolutely positioning the div setting bottom:0; If your page has lots of other content, you're gonna have to get really creative. Always put up a jsfiddle, it encourages readers to try it out. – Ruan Mendes Commented Aug 4, 2011 at 17:22
• 1 Check this out, it may be a better solution: jscrollpane.kelvinluck. – MLS1984 Commented Aug 4, 2011 at 17:50

2 Answers 2

Just do body{ overflow-x:scroll;} and a horizontal scrollbar will always be there.

// you want something like this. there is no way to manipulate the position of overflow, it is always at the bottom of the div it is in. so if you want the overflow to be at the bottom, you need to put the div at the bottom.
// Note: You can always use flexbox for faster and easier content alignment. i did not use it here for the sake of others who do not know what flexbox is.

#div1, #div2{
  box-sizing: border-box;
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50%;
  padding: 1em;
  margin: 0;
  border: 2px solid;
  
}

#div1{
  left: 0;
  border-color: red;
}
#div2{
  left: 50%;
  border-color: blue;
  overflow-x: scroll;
  white-space: nowrap;
}

<div id="div1">
div 1
</div>
<div id="div2">
div 2 (a lot of content)
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni quidem minus autem at doloremque. Delectus perferendis, voluptate consectetur inventore fugit, dolorem ut soluta ullam totam iure, in fugiat quas repellat.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni quidem minus autem at doloremque. Delectus perferendis, voluptate consectetur inventore fugit, dolorem ut soluta ullam totam iure, in fugiat quas repellat.
</div>