Erratic widths in IE for percentage columns.

[psyche]

I'm trying to create a layout which has left and right fixed-width columns with a fluid middle column, and fluid mini columns inside the middle column. I've got various ways of creating the basic three column structure, but come unstuck when I try to put the fluid mini columns inside the middle column. My plan was to do this by giving them a percentage width and floating them. All is well in both IE and Mozilla until I try to float them - with no float they present with the width I expect, ie as a percentage of the width available in the middle column. As soon as I stick in a float, in IE their width suddenly presents as a percentage of the total page width. Why does it do this, and how do I stop it?

I've put two examples together with just the bare bones of code: Test A (http://www.psychedesign.co.uk/temp/testa.html) creates the basic three column structure by positioning the side columns absolutely and giving the middle column a margin on both sides to clear them. Test B (http://www.psychedesign.co.uk/temp/testb.html) floats the left and right boxes, but again uses margins to keep the middle in the middle. Both have the problem.

I tried solving the problem by using display:inline instead of float to get the green boxes to sit next to each other. That kinda works in IE, although they display a little smaller than they should. But in Mozilla the boxes reduce to the width of the text in the paragraph (which I guess is what ought to happen, really).

An odd secondary bug I noticed when putting these examples together: in IE some of the paragraphs in the middle column don't display when the page is loaded. Is this the peekaboo bug I've heard so much about?

Any advice you can give me would be very much appreciated - I'm relatively new to CSS and trying to learn quickly!

[Arbitrator]

Your pages have a problem: testa.html (http://validator.w3.org/check?verbose=1&uri=http://www.psychedesign.co.uk/temp/testa.html) and testb.html (http://validator.w3.org/check?verbose=1&uri=http://www.psychedesign.co.uk/temp/testb.html) are both invalid.

The pages are missing a document type declaration (http://www.w3.org/QA/2002/04/valid-dtd-list.html). This lack thereof puts both Mozilla and Internet Explorer into backward compatibility mode (http://hsivonen.iki.fi/doctype/); IE in particular acts very different when not in standards mode. I would recommend using an HTML 4.01 Strict DTD.
The style element requires a type attribute (with value text/css).
The page requires a title element.
The page requires that a character encoding (http://www.htmlhelp.com/tools/validator/charset.html) be specified.

[psyche]

Thanks, but I do know about those things - I left them out for the sake of simplicity in posting an example. They don't make any difference to the problem - I've now added them and reuploaded to demonstrate.

[Arbitrator]

You apparently did not read the link labeled "backward compatibility mode" that I provided above. Internet Explorer is still rendering in quirks mode.

[psyche]

Ah, sorry, these things are obviously more complicated than I'd realised. That'll teach me to dash off a reply in a hurry. I'll go and try and decipher the page you recommend. I can't use the DTD you suggested because it has to be XHTML, but I assume there's an XHTML one that won't trigger quirks mode.

[Arbitrator]

You weren't using a DTD at all before. I fail to see why you must use XHTML.

I'll give you the direct answer: Internet Explorer does not understand true XHTML (it reads it as HTML). IE also does not like anything before the document type declaration. So when you put the XML declaration before the doctype declaration, it goes into quirks mode. Remove that and it will go into standards mode. It is also recommended to use a strict DTD instead of a transitional DTD which lets you get away with a lot of poor (yet valid) code; of course, the point is defeated if you don't validate (http://validator.w3.org/) against the DTD.

Internet Explorer 7 is supposed to eliminate this problem by adding recognition for the XML declaration though it, again, doesn't understand true XHTML. Try renaming your page with the *.xht or *.xhtml extension and see what happens in both browsers: IE will try to download it, valid or not, and standards-compliant browsers will display a parsing error instead of the page if the code is invalid. Most people don't know what XHTML really is and should be using HTML 4.01.

[psyche]

You weren't using a DTD at all before. I fail to see why you must use XHTML.

Well, I have been using one for actual pages - the examples I put up were really just to show the bare bones of the CSS I was using.

The reason why I have to use XHTML is simply because my boss is very insistent about it. As I'm sure you've gathered, I hadn't understood this DTD thing at all. I'd been told it was important to have one, but hadn't appreciated there was a range of options. I've just been using what I've been told, and I was told to use that one because I've been told to code XHTML. (By which I understand properly nested tags, no open tags, etc etc, as per the tutorial at W3Schools - please tell me if I'm wrong about that too)

You've obviously pointed me in the direction of something very important, so thank you very much. And apologies again for leaping to an over-hasty reply earlier.