CSS layout in IE6 not displaying correctly

Works fine in Firefox though

[Merciless]

Hi all,

I have a page layout I'm using but IE6 doesn't want to play ball. I've got an example layout at [c63design.com ] and if you inspect it, the DIV containing the main content drops down the page when the browser window is too small to view the entire table width. Firefox doesn't have this problem, it just functions as I would expect. Does anyone have any ideas how to fix this please?

Thanks in advance,

Rob

[zollerwagner]

Funny, it works fine in my Foxfire and IE6.

I've been struggling with floats in IE, too. Eric Meyer's two books "Eric Meyer On CSS" and "More Eric Meyer on CSS" deal with similar issues.

Contrary to what I thought, today I had to float both divs, so one was right and one left. That worked. Before I tried that I went throught most of the rest that I'll write below...without success.

One problem is an IE bug, but it's not a reliable bug, which may explain why I don't see it in this case.

I think that it sometimes helps to have outer wrapper divs which is made to float, but has the padding, borders, and margins set to 0. Do the setting of padding and margins on whatever is inside the wrapper divs.

(I think I'm right that it's all three that matter: borders, margins, and padding.)

Meyer suggests, I think, that the browsers treat width differently and that this could cause the problem of divs. You can use css hacks that tell each browser different widths, as needed. Or you can use percentages for the width of the divs, but you might have to reduce the percentages so the total is less than 100%. If you add padding to the divs, for example, you have to be careful that the width of the divs' content area and the divs' margins, padding and borders don't exceed 100%.

He suggests using absolute positioning if possible. But if the two positioned div can ever contain more data than the non-positioned div, it will extend past the bottom of the non-positioned div. I've seen it do this. The positioned div ran over the next div on the page (covering the footer, in this case), and you couldn't see the bottom part of the positioned div's content. It was a mess. So you can only use the positioning technique when you know the content will fit the situation.

Hope that helps.