Is there a way to specify overflow in CSS?

Question

I have been using a lot of 'position:relative;' in my design, I just find it the easiest way to get everything where I need them to be.

However, the more items I add on my site (each one with their individual div) each one ends up further and further at the bottom of my page, so I have to manually position them higher.

This leaves a lot of empty space at the bottom, and I thought that adding 'height: 1000px;' would limit the scrolling a bit, but this method doesn't seem to work.

I've even tried adding 'height: 1000px;' to the wrapper and it's still not working.

How can I limit vertical scrolling, to the number of pixels I choose?

Thanks so much in advance.

Answer 1

You can specify both the height and the overflow:

.someClass
{
    height:1000px;
    overflow:scroll;
}

The most common values for overflow are scroll, auto, and hidden.

Answer 2

Wait, so you are creating a div, using position relative to move the content of the div to the correct location, and the issue being that the div tag itself is still in the same place and creating a vertical scroll even though there is no content there?

If so you should look into floats.

Here are some tutorials.

• Floatutorial
• Learn CSS Positioning in Ten Steps

Answer 3

To limit the distance someone can scroll, I think you'd need to use JavaScript. I'm not sure how, but I can't think of anything in CSS that would do that.

If you are looking to set when something should scroll instead of just be cut off or expand the tag, use overflow:auto;.