Erratic widths of percentage-based columns in IE

[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 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 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!

[ukgeoff]

It'd the 'prolog' line that's throwing IE into confusion.

Code: Select all

<?xml version="1.0" encoding="iso-8859-1"?>

Get rid of it. It's not actually requirement anyway. You are better off using a meta tag to specify the character encoding.

[psyche]

Thank you! Very grateful.

[psyche]

Just did as you suggested and the columns are doing just what they should. Boy, does that make me happy!

Some of those middle paragraphs are still hiding when the page loads, though. They reappear when I select the text. Is this the peekaboo bug? If so, how do I fix it?

[Rob]

TRUE XHTML served with the CORRECT content encoding will not work in IE6 period.... all you'll get is the nicely rendered XML DOM Tree! ....

IE6 is extemely odd and can be thrown into funny quirks modes with the silliest things.