Div moves to next line when shrinking window

[boscopup]

I've been working on a CSS layout, and everytime I fix a problem in one browser, I find a new one in another.

I've got 2 columns, each with a different sized header image (because the image goes to the side one way and then down on the left column, but I don't want content to have to be beneath the left column portion of the image). Left column contains an image in one div, then the navigation links beneath that. Right column contains the other piece of header image, with a slogan below that, and then the content starts beneath the slogan. I had to do some work to get the images to touch in IE, but finally I got it working, and my slogan is in the right place too (had some issues with that, but they're resolved after doing much research).

So the one remaining problem (that I know of), is that when I resize the window in IE, if I shrink it to a width smaller than the sum of the two header images, the entire righthand column (including header image) goes down beneath the left column. In Firefox, you just get a scrollbar, which is exactly what I want to happen.

The layout (with colored boxes to help me figure out where all my divs are) is found here:
http://brightfuturegoats.com/test/br...turelayout.php
CSS is found here:
http://brightfuturegoats.com/test/br...turelayout.css

Looking at it now, I don't know why I split the image the way I did - probably would have been easier to have one whole piece along the top, then a separate piece down below on the left column... But if I can easily fix it the way I have it now, that'd be easier than redesigning the whole page and re-doing my image split, even if it would be a good exercise in CSS layout.

[mburt]

Use percentages, they can save you ALOT of trouble with resizing.

[boscopup]

Could you expand on that some? I'm not sure where a percentage will help this issue. Thanks!

[Twey]

I'm afraid that won't help much here, since the images can't be sized appropriately.
The easiest answer in this case is to wrap your content in a DIV with an absolute pixel width greater than the sum of the two images.

[mburt]

Oh, what I usually do in this situation is add the width of the border to the divs width. (forgot to mention that)

[boscopup]

Thanks for the comments! Sorry I'm delayed in responding this time around.

Finally got back to it, and tried doing a min-width on the container div that holds everything, but that didn't have any effect in IE. I don't want to specify an absolute width, as I don't want to limit the width.

I think the best solution will be to just reslice that image so that it's just ONE image (and thus div) across the top as a header. Then I can put the bottom part of the side image at the top of the left column. I've done a bunch of sites with that layout, including working on one today, so I'm a little more uptospeed with what quirks IE and Firefox have with it.

I appreciate the fast responses! This is a great forum! Glad I found it.