HTML Layout Scrolling Divs

Question

This is the page I am referring to: http://searchleaf.com/v2/search_2.php

I have a floating div in the middle of the page that is my 'content' div. Inside of that I have 3 divs, my 'contentboxes', side by side, each taking up 33% of the space.

When you search from the first contentbox, it returns some results and the second content box becomes visible. From there, when you click on a word, the third contentbox becomes visible with some more information.

My problem is when the page is shrunk, or there are a lot of information for one word, the second and third boxes sometimes bleed over the main content box. I have looked at CSS's overflow property but I can't seem to get it how I would like it. It should never bleed over the main content box.

What happens with the overflow set to auto on the main content box: A scroll bar shows up and scrolls the entire content area.

What I want to happen: A scrollbar is given to each conentbox as it is needed.

Here is a simple html layout example of my problem, this might be easier:

http://searchleaf.com/v2/layout.html

When the overflow property is changed in .content to auto. The whole thing scrolls. How can I get it to just scroll the third box?

Thanks, Bryce

Answer 1

try giving a fixed width to your main container and set the overflow hidden and then set the inner div with a fixed height and set the overflow-y to scroll.

Answer 2

your problem might be that the width of the internal divs is 33.3%, and they also have a thick border and padding, which are added to their width (so the resulting width is 33.3% of the container + the pixels in the borders + the 15px padding (on both sides).

You can try adding an internal div to those divs and puting the border and padding in the internal divs, only leaving the width:33.3% in their parent divs, if that makes sense.