[sleepingfish]

Can't remember this one, it's Monday morning, was wondering if any clever people could help me out.

Containing DIV has no set height so should be the height of the content within it. Works fine in IE but has no height in Mozilla. Sure I've sorted this before but can't get my head in gear this morning.

TIA

[Brown]

add a clearing div beneath it and hide it?

<div id="clearer"><hr /></div>

#clearer {display: none;}

or something like that?

[Brown]

ps - i've seen some with <div id="clearer">&nbsp;</div> but i feel this is wrong - an <hr /> can show so much more to those that see it.

[sleepingfish]

Cheers, the thing is the height really needs to change from page to page, depending on the content.

[Jay-NL]

This works, although it has 1px extra height in FF.

<div style="clear: both"></div>

No need for content. I think setting display to none would work but IMHO it's wrong. Display: none would remove the div from the flow entirely - so I don't think it should clear then.

[sleepingfish]

In FF the containing DIV doesn't seem to be containing anything, it's appearing above the DIVs that are within it.

[Brown]

ok, confusion now set in. can we see it?

[sleepingfish]

Ha ha, yes I'm good at confusion. Ok then here's a stripped-down version with the same issue.

In IE the dark blue box has everythign inside it, this is what is supposed to happen. In FF however, the containing DIV just sits at the top as if nothing is inside it.

(the css is here)

[Jay-NL]

Use the footer to clear (in the footer, set clear: both). If you don't want a footer, create an empty div at the same place like so: <div style="clear:both"></div>

However, if you're planning to do columns, you may want to look at faux columns at alistapart. A lot easier. [edit] maybe not so much easier, but more flexible and fun - you can create really nice effects with it [/edit]

[sleepingfish]

I just added

clear: both;

to #footer but it doesn't seem to be doing the trick.

[Jay-NL]

Because it's floating. No need for that.

[stickmus]

You need to remove the float:left from the footer too.

[sleepingfish]

I added

overflow: hidden

to the container DIV and it works!

Cheers all, I fecking hate Mondays.

[sleepingfish]

Ahah, by the time I'd posted that last reply there were the posts about the float:left - removed that (and taken out the unecessary overflow: hidden; from the container DIV) and it does indeed work. Thanks again.

[stickmus]

Take off the float and the width for the rightcolumn too.