Question

I’ve got a div that has many listitems in a verticle rows (over 200). Depending on the screen resolution the container div should resize to fit the screen and create a vertical scroll bar and horizontal scroll bar for side scrolling – however; using overflow:auto or even overflow:scroll the list items are not cut to fit within the container div and a horizontal scroll bar is not added. So I have a container that is roughly 700px in width and listitems that are roughly 1000px wide and these list items are hanging over the edge of my container (on the right side) by 300px. What can I do to fix this?..here is my CSS for the container…

#report-box #report-text{
   position:relative;
   height:96%;
   width:1200px;
   overflow:auto;
   font-size:12px;
   color:#000;
   margin:0px 0 0 0;
   }

My listitems are styled in my HTML as follows:

        <li class='_1' style='width:100%; float:left; position:relative;'>SOMEDATA</li>

Answer 1

I’m not sure what the problem was but instead of forcing that to work I made an additional container inside of the original container and specified overflow:auto to that and somehow it is now working.