<div> overflow problem

[mberndt100]

Hello,
I'm having a problem with overflow.
Basically I have a <div> that is 600px wide and 300px tall. The overflow is set to auto.

Inside this <div> are several <p>s that are float:left block elements. Each of these <p>s contains a picture and a line of text which open a new window when clicked.

The problem is that the overflow in the <div> is not working.

Here is the code:

#subcontent {
color: #663c13;
background-color: white;
display: block;
margin-top: 20px;
margin-left: 20px;
padding: 5px 15px;
width: 581px;
height: 308px;
float: left;
overflow: auto;
border: solid 1px
}

.coll_thumb {
color: #663c13;
font-family: Futura, Helvetica, Geneva, Arial, SunSans-Regular, sans-serif;
text-align: center;
display: block;
margin: 8px;
padding: 0;
float: left;
overflow: auto
}

<div id="subcontent">

<p class="coll_thumb"><a href="javascript:location='collections_metro.html'; window.open('#','print','height=600,width=600,scrollbars=no')"><img src="images/thumb_test.jpg"><br />test</a></p>

<p class="coll_thumb"><a href="javascript:location='collections_metro.html'; window.open('#','print','height=600,width=600,scrollbars=no')"><img src="images/thumb_test.jpg"><br />test</a></p>

<p class="coll_thumb"><a href="javascript:location='collections_metro.html'; window.open('#','print','height=600,width=600,scrollbars=no')"><img src="images/thumb_test.jpg"><br />test</a></p>

<p class="coll_thumb"><a href="javascript:location='collections_metro.html'; window.open('#','print','height=600,width=600,scrollbars=no')"><img src="images/thumb_test.jpg"><br />test</a></p>

<p class="coll_thumb"><a href="javascript:location='collections_metro.html'; window.open('#','print','height=600,width=600,scrollbars=no')"><img src="images/thumb_test.jpg"><br />test</a></p>

<p class="coll_thumb"><a href="javascript:location='collections_metro.html'; window.open('#','print','height=600,width=600,scrollbars=no')"><img src="images/thumb_test.jpg"><br />test</a></p>

<p class="coll_thumb"><a href="javascript:location='collections_metro.html'; window.open('#','print','height=600,width=600,scrollbars=no')"><img src="images/thumb_test.jpg"><br />test</a></p>

</div>

Can anyone explain why the overflow just switches to visible?
Thanks,
Mike

[edited by: tedster at 6:25 pm (utc) on Oct. 14, 2005]
[edit reason] fix formatting [/edit]

[Setek]

The problem is the float: left part. When an object is set as a float, the parent div is unaware it has any children (because they're "floating".) You'll probably find that it's not that the div is not overflowing correctly, but that the floats are just pushing down past the bottom of your div (Try outlining/bordering your divs and floats and see how it looks [on a sidenote, Chris Pederick has a brilliant Web Developer Toolbar plugin available for Firefox which outlines, edits CSS on the fly, and many other things- [chrispederick.com...] or search Mozilla Addons [addons.mozilla.org...]

To force the parent div to acknowledge its children, try having a <br style="clear:both;" /> below the floats.

[mberndt100]

OK Thanks for your help. I outlined the <div> tag, and yes, it is pushing down along with the its children.

So if this method won't work, can anyone suggest a simpler way for me to do what I'm trying to do? I have also tried adding the max-height property to the <div> but with no success.

Basically there's the <div> which is the box. Within this box I want to have a large number of images, each with a line of text below it and each of these images needs to have the <a> tag with the javascript to open a new window.

The box needs to stay the same size all the time because there is other content below it.

PLEASE! any suggestions at all would be helpful. I am sure I'm just overlooking something obvious. This is what happens when I try to teach myself.

Thanks,
Mike

[edited by: tedster at 6:30 pm (utc) on Oct. 14, 2005]
[edit reason] formatting [/edit]

[directrix]

Does this problem occur only in IE? If so, googling "Internet Explorer and the Expanding Box Problem" (with the quotes) may help.

[mberndt100]

Actually I've been using Safari as my testing browser. I usually find it to be the most accurate, and the least forgiving of errors on my part.

So the strange thing is that the overflow seems to work fine on Firefox, Opera, and even IE5 (mac). But not Safari.

This problem is really frustrating me. Is it a bug in Safari?

I've posted two screenshots on my website:
<Sorry, no personal URLs.
See Forum Charter [webmasterworld.com]>

please let me know if you can tell what I'm doing wrong.
Thanks

[edited by: tedster at 6:22 pm (utc) on Oct. 14, 2005]

[mberndt100]

oops...my fault!

anyway... if anyone can help...I hope I have described the problem clearly enough.
mike