Simple CSS & xHTML cross-browser problem

I'm working on a little project here, trying to design a table-less page using XHTML and style sheets.

The first version worked only in IE, Mozilla and Opera didn't display them the way I wanted to. So I rebuilt the stylesheet from scratch with cross-browser compatibility in mind and it sort of works in all three browsers, except for one little bit:

http://gosh.ex.ac.uk/~cs01kb/lg_sample/

Stylesheet: http://gosh.ex.ac.uk/~cs01kb/lg_sample/css/main.css

IE6 and Opera 7 correctly display the little bar at the bottom with all the links, but Mozilla Firefox 0.8 doesn't - it displays it under the two main content boxes. I'm just out of ideas on how to try and make it work, it should be so simple.

Any help on how to get around it would be appreciated.

P.S.: If you're using any other browser out there (especially on a Mac) just a quick note or a screenie of what the page looks like would be nice... thanks!

There are two problems. First, the </xml… tag puts IE6 into quirks mode. Not sure, but Opera, if IDing as IE may emulate IE and go into quirks mode itself. If contributor akh sees this, he may be able to confirm or belie this. Instead of the xml prolog, use a meta statement <meta http-equiv="content-type" content="text/html;charset=ISO-8859-1" />. Quirks mode may explain why IE and Opera improperly display the page—that's right, Mozilla/Firefox nee Firebird got it right.

Why is Moz right? You've used floats for your main content, within a container. A float does not take up any real estate, so the container div does not expand. IE improperly expands the containing div (a major goof). The link bar and copyright lines are immediately below the container div which is far short of clearing the floats.

The following should fix you up:You just need to clear the floats.

cheers,

gary