Weird IE min-width problem: It only HALF works!!?

[lonewolf]

Hi All!

I'm working on a new layout for my site, and instead of the fixed with table, I’m trying to use a fluid css layout with a minimum 780 width. Since IE doesn't support min-width :redhot: I have run into many problems.

Firefox is FINE :D

I have started using a layout from Ruthsarian Layouts which is perfectly what I am after, however I have a problem in IE. I have tried various methods to solve this including placeholder transp gifs, wrapper/content divs, hidden tables, hr's.

Top logos and navigation remain fixed at 780 pixels :)
Main column CONTENT expands and shrinks with browser window but the BORDER remains fixed...!

Here is a little demo to illustrate the point. The yellow line is a 780px gif (tried using this to limit width, didn't work)

http://lonewolf-online.net/test/index.htm

The pink lines are the wrapper div borders. When wrapper is less than yellow line, the pink border stays put, but the contents flows!


Any ideas and help on fixing this is greatly appreciated.

Thanks

Tim.

[Wickham]

The main reason IE6 stays wider while the content shrinks in a small window is that the right header image http://lonewolf-online.net/test/images/tops/logo1.jpg is quite wide and because it has a fixed width it causes a scroll bar and extends out right while the lower content does not need to.
The yellow gif has the same effect, as do all the menu links.

As you know, IE does not support min width but you can make it do so with jello Molds.
See http://www.wickham43.supanet.com/tutorial/maxminwidth.html where I have used it and IE6 and Firefox both have a max and min width. You may be able to use this method but too many hacks on the same page may co***ict with each other.

Otherwise just abandon the min width hack and you should be able to keep the content as the same width as the headers in IE6 (and Firefox) by making the content divs the same overall width as the header images because they will create the minimum as they do now but the content won't get any less.

What you are seeing in IE6 is perfectly normal. If you open your page in a small window the content fits the window but the header and menu links are wider so they extend right. When you scroll to see the rest of them, the content stays where it was so you think there is a gap on the right. Firefox is operating the minimum width so the effect is not the same but it would be if the minimum width hack was not being used.