Help with OVERFLOW

[puffnstuff]

I have a box that has a defined width and height.

I have placed text and pictures within the box, and with the use of margins, borders, etc. everything fits very well from left to right, and it's all perfectly centered within the box.

I want to limit the box height to 460px, and have a scroll bar when the content goes beyond that height. But when I use the overflow:auto feature, the scrollbar actually covers up the right side of the box, and some of the characters of text cannot be seen. It also puts a horizontal scroll bar across the bottom so I can scroll to the right to see the far right side of the box. I don't want the horizontal scroll bar, but if I only ask for the vertical scroll (overflow-y:auto), then I can't access the right side of the screen at all. Very frustrating.

How do I make this work? Do I have to change the original width of the box? If I make the box narrower, it doesn't work within the design of the page, and the same thing happens when I make the box wider. I don't want to have a whole pile of white space on the right side if the content is less than 460px in height.

Does anybody know how to easily add overflow to a box or div, without having to re-configure the entire page layout?

[Medyman]

It would help to see your page so provide an accurate assessment of what would be the best.

In the end though, you'll have one of two choices:

1) Make the container div wider to accommodate the width of the scrollbar and keep your design entact.
2) Make the div smaller and keep the container the same size.


So if doing either breaks your design, as you say, you'll have to rethink your design. There is no third option (if you want to stay with a 100% CSS solution).

[puffnstuff]

Looks like option #2 works the best. I don't know why I didn't catch that before. Still doesn't look pretty. I wish there were more options such as width of the scroll bar, and an automatically changing width of the inside div pending on whether the overflow/scrollbar comes into effect or not. When I have only a short description and no scrollbar, I end up with white space on the right.

Thanks.