overflow:auto not working within float

mikep · August 24th, 2007, 08:04 AM

Hi, I hope that you guys might be able to help me with this. I have a fixed size content box which is positioned using a float and has overflow: auto. The css is:

Code:

#transbox {
 float: right;
 /*position: relative;
 left: 350px;
 top: -110px;*/
 width: 280px;
height: 300px;
 margin: 14px;
 background-color: #fff;
 border: 2px solid black;
 filter:alpha(opacity=70);
 opacity: 0.7;
 -moz-opacity:0.7;
 overflow: auto;
}
#transbox div {
 padding: 5px 15px 15px 15px;
 color: #000;
 filter:alpha(opacity=100);
 opacity: 1;
 -moz-opacity:1;
 position: relative;
}

and the html:

Code:

<div id="transbox">
 <div>
   <h3>about lorem</h3>
   <p>
   Lorem ipsum dolor sit amet, consectetur dipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in <a href="index.cfm?action=public.contact">culpa</a> qui officia deserunt mollit anim id est laborum.
   </p>
   <p>
   Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in <a href="index.cfm?action=public.contact">culpa</a> qui officia deserunt mollit anim id est laborum.
   </p>
 </div>
</div>

The problem is only with IE, as it appears to be working as expected in Firefox. What is happening is that in IE the browser recognises that the text is overflowing and adds the scroll bar, but the text just gets displayed anyway.
Odd thing is that if I remove the float and position it relatively, it seems to work ok in IE.
To see it in action please see http://www.geosend.com/nm/index.cfm?action=public.about.
Any help with this would be appreciated.
Mike

karinne · August 24th, 2007, 08:23 AM

It's the <div> inside the <div id="transbox"> that screwing everything up ... you don't need it anyways.

mikep · August 24th, 2007, 08:40 AM

Thanks for replying so quickly. It seems you are correct, so i've removed the inner div and added the padding and color items to the #transbox div and it all seems to work great now.

Many thanks, Mike