[RESOLVED] 3 col fluid - FF left and right columns gone down

[Flying Monkey]

Hi. Me again, but I thought I better start a new thread seeing as I marked the last one resolved. Its the same site - moved slightly to:
http://www.flyingmonkey.com.au/re/ala.htm
http://www.flyingmonkey.com.au/re/css/ala.css

I was so happy that everything was sorted for IE, about to send an email to the client when I checked again in Firefox and discovered the left and right columns had dropped down underneath the centre column. It still works in Safari and IE6 and IE7, but is showing the same issue in Netscape. I've scanned the css several times and tried eliminating things, but with no success.

Any help gratefully accepted.

Monkeyman

[sticks464]

I just posted the images for the file in your other post. With the new images, it should work in all browsers. I checked it in IE6, IE5.5, Opera9 and FF2.

[Flying Monkey]

Hi Sticks, yeah thanks, I responded to you in the last post. Its not quite the effect I am trying for. I'm trying to create an extremely fluid layout that appears balanced in many browser sizes and expands and contracts to fit. Hence the expandable banner image with png files.

[sticks464]

That is a three column fluid layout. It works on all resolutions above 1024 X 768, expands and contracts as needed for monitor size.

[Flying Monkey]

Sorry, mate, but when I view your page, the text and the banner stay in one block. Yes they centre themselves on the page, but they don't expand and contract. That's what I mean by fluid. Look at my (admittedly not working in FF and Netscape yet) page to see what I mean. It was built up from the 'Holy Grail' model on alistapart.com

I appreciate your time and input, though.

[Centauri]

I think it is the float:left on #container - did you have that before?

[Flying Monkey]

Centauri, you are a genius. Why did that cause a problem?

[Flying Monkey]

BTW, Centauri, I just sent you a message, so please ignore that now.

[Centauri]

Centauri, you are a genius. Why did that cause a problem?

When it is floated, it no longer occupies full available width, but tends to "shrinkwrap" contents - so it determined that #container was not wide enough to accept any more than #center.

Cheers
Graeme