"overflow: hidden" not hiding!

[jstam]

Hello,

There is a div which contains two images that I would like to to become hidden when the window is resized smaller than the width of the two images:

<div id="header"><img src="images/logo.gif"><img src="images/header2.gif"></div>

Yet once the window is narrow enough, the second image spills over to the second line!

The style I have for it:
<style type="text/css">
#header
{ overflow: hidden;
background-color:#003366;
width:100%
}
</style>

I don't know if I'm doing something really blockheaded that I didn't notice. Yet I can't find anything wrong with what I've done... If this looks fine, I'll be glad to post more code, but I imagine the problem must be in this area...

Thanks!

[D_Blackwell]

Will it suit your purpose to add height: (img height); to #header? Are the images equal in size? The container will be filled to the available height before additional content is hidden. What else is in that box?

[jstam]

*smashes head on table*

Thank you very much!

[jstam]

Actually, one more quick question while we're on this topic.

What if I don't want the images to jump to different lines, but induce a window scrollbar instead? (Ie, all the images stay on the same line)

It seems as if overflow:auto and scroll can only make the scrollbars for the particular div it's referring to.

Thanks!

[D_Blackwell]

If you don't want the second image to wrap down, add width: (some width); to #header. This will handle that part of it. However, the scrollbars will be applied to #header. I don't see how you could make the window scrollbar kick in in relation to #header. Of course I'm willing to be wrong:))

[jstam]

Hi, a bit of bad news... After a bit of modification, I have uncovered a new problem:

I added links to the images as such:
<div id="header"><a href="http://www.link.ca"><img src="../images/logo.gif" border="0"></a><a href="http://www.link.ca"><img src="../images/header2.gif" border="0"></a></div

And my CSS now looks like:
#header
{
overflow: hide;
background-color:#003366;
height:87px;
width:100%;
padding:0;
margin:0;
}

When I set overflow to auto, a vertical scrollbar appears within the header div with just a bit of scrolling. The images are exactly 87 pixels high. I don't see why the scrollbar should be appearing at all...

When I set it to overflow, the div's scrollbar disappears, but then when the window is horizontally shrunk enough, the images break to different lines!

Any suggestions? Thanks so much for your time