Home/ Questions/Q 8053079
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-05T07:44:25+00:00

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

  • 0

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

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0