So after spending a couple of fruitless hours on the web browsing through a multitude of errors and misshaps that in the end left me wanting I realised that I won't be able to find my answer, so I might as well ask my question somewhere relevant. To start of I might add that I am not overly knowledgeable as far as css goes, so the reason the answer eludes me might be obvious, alas not to me. I have created a page for an interest my father is involved in which is basicly a single center column with a basic header and footer. The main body has a picture as background with a set height and background-repeat set to no-repeat. The problem is that on one of these pages I made small grey colored div-boxes with opacity (so some of the background picture shows through) and the text is then overlayed with another div with relative positioning. However I try to squeeze the contacts on that page they won't fit on a single screen, so I use overflow-scroll and place the final content on the site. The issue that still eludes me is that I have continously been forced to use higher and higher relative values on each consequent div and when I try it out in firefox as well as safari a very long scroll bar is shown instead of the much shorter scroll bar I had intended. So my question is, how do I limit the length of the scrollbar so the only scrollable region is the region I had intended in the first place rather than a huge area of nothing.