Floated DIVS display differs FF/IE6

Having spent quite a while tweaking a design to appear as I want, and
everything looking good, I tried one last test -- and of course the result
differs between FF ("wrong") and IE6 ("right").

I tried Googling for an answer, but gave up after tutorial 27 (of 1.8
million), so I'm hoping one of the experts will be able to oblige!

The problem:

3 column layout, with left and right floated columns having a defined
width, and the centre with whatever's remaining.

If I then have a centre box containing floated DIVs, FF increases the
box's height such that the bottom is below that of the "longest" column,
whilst IE6 leaves the box as it "should" be.

I'd be grateful if someone could spare a few minutes to have a look and
advise the correct approach I should be taking for FF to render as
desired.

Test page is at http://www.horshamhc.co.uk/site07/floatboxtest.htm

CSS is at http://www.horshamhc.co.uk/site07/hhcstyles07.css


TIA

Pete
--
www.lightningnews.com Lightning fast anonymous usenet downloads for 5$ only !

On 2007-07-31, Pete Horrobin <respond.TakeThisOut@viause.net> wrote:
> Having spent quite a while tweaking a design to appear as I want, and
> everything looking good, I tried one last test -- and of course the result
> differs between FF ("wrong") and IE6 ("right").
>
> I tried Googling for an answer, but gave up after tutorial 27 (of 1.8
> million), so I'm hoping one of the experts will be able to oblige!
>
> The problem:
>
> 3 column layout, with left and right floated columns having a defined
> width, and the centre with whatever's remaining.
>
> If I then have a centre box containing floated DIVs, FF increases the
> box's height such that the bottom is below that of the "longest" column,
> whilst IE6 leaves the box as it "should" be.
>
> I'd be grateful if someone could spare a few minutes to have a look and
> advise the correct approach I should be taking for FF to render as
> desired.

The first child of <div id="txt3colContent"> is another div. Add
"overflow: hidden" to the styles for that inner div.

What FF is doing here is correct. Your clearing div should clear all
floats in its block formatting context, which in this case _includes the
left and right columns_.

To make it clear only the floats in its containing block, which is what
you want, you need to promote its containing block to a block formatting
context root. The way to do this with fewest side-effects is to make
that containing block overflow: hidden.

> Test page is at http://www.horshamhc.co.uk/site07/floatboxtest.htm
>
> CSS is at http://www.horshamhc.co.uk/site07/hhcstyles07.css