New to float -- problems in firefox!

[kihre]

The problem page is here: http://kihre.com/portfolio/ibuenacasa/, the css directory is here http://kihre.com/portfolio/ibuenacasa/css

Everything validates, and in IE it appears as it should, but in Firefox everything lines up vertically instead of floating correctly. All my syntax appears to be proper, and I've checked all my semi-colons and brackets.. so at this point I simply dont understand where I've gone wrong. This is my first time really working with floats, so I suspect it's improper usage or something of that nature, or quite possibly some dumb mistake I can't seem to find on my own.

Thanks in advance for any help!

[drhowarddrfine]

Were you using IE or Firefox when you marked this up? IE7 is 10 years behind web standards. Never, ever use IE as a reference for how anything should work.

I'll look at this in a bit.

[drhowarddrfine]

First quick glance shows this: IE is incorrectly expanding some elements to contain floated elements. This is incorrect behavior while Firefox is performing correctly. In fact, all the modern browsers (FF, Opera and Safari) display the same as Firefox. This is a known bug in all versions of IE.

So, what to do. First, always do your initial design and markup using a modern browser and not IE. Once you get it working in FF or Opera or Safari, then we can hack for IE as all its bugs are known as are the fixes.

In this case, take care in remembering that any parent containers with floated elements inside will NOT expand to contain them, though there are methods to make that happen. (Google for "clearing floats")

Another point. You have a case of 'divitis', that is, a need to enclose everything in a div. Divs are used to contain related elements in a structured way when necessary. But only if necessary. Otherwise, there is no need for them.

I hope you didn't pay for the framework you are using. If so, I hope you can get your money back.