div with float:left doesn't stretch to fit contents...

[gusblake]

I'm working on a page for my new site and have come across this problem: I have a container div (not floated, 100% height) and two columns inside it (fixed width, taking up the whole width of the container div together), which have float:left to make them appear side by side.

Inside the column div on the left hand side i have a load of lorem ipsum text that is longer than my browser window, and in FF, the text goes straight off the end of the container div while the container div stays at exactly 100% height.

I know that's what floated elements are actually supposed to do.... I tried setting overflow: to different values but no joy there.

I heard of this fix where you put a div with clear:both straight after the two column divs, but this didnt work. Any suggestions?

[mwinter]

[...] I have a container div (not floated, 100% height) [...]

Inside the column div on the left hand side i have a load of lorem ipsum text that is longer than my browser window, and in FF, the text goes straight off the end of the container div while the container div stays at exactly 100% height.

[...]

I heard of this fix where you put a div with clear:both straight after the two column divs, but this didnt work. [...]

Of course not! You instructed the container to be of a specific height, so it's not about to change. IE's behaviour in this regard is broken (but will be taken advantage of in a moment as a hack).

What you should do is use the min-height property. This will allow the container to expand if necessary, but stay at 100% height otherwise. Unfortunately, not all browsers will support this. We can use IE's broken height behaviour as a workaround, but others may refuse point-blank.

#container {
  min-height: 100%;
}
/* IE-specific hack */
* html #container {
  height: 100%;
}

The '* html' start to the second selector is important as only IE recognises it (another bug ).

Hope that helps,
Mike

[gusblake]

hmm that sounds like it should be right, but it didn't work, instead it was fine in IE still but in firefox the container div was nowhere to be seen... i also have html{height:100%} and body{height:100%} in my css, if that would make a difference. But i can't see how they would make the thing disappear altogether. Thanks anyway

[mwinter]

hmm that sounds like it should be right

It is.

but it didn't work

Could you please post a link to an example?

I had used this before, and it rendered correctly in IE4+, Mozilla 1.3+ (and therefore its derivatives, including Fx), Opera 6+. As I recall, it didn't in Safari and Konqueror - they just ignored the min-height property and carried on as usual.

i also have html{height:100%} and body{height:100%} in my css, if that would make a difference.

It would as those declarations are necessary. I assumed you already had them in place - to get as far as you had - which is why I didn't mention them.

Mike


The version numbers quoted above are not necessarily the minimums. Earlier versions may also behave as anticipated, too.

[gusblake]

actually its ok, the min-height works now because ive got overflow:hidden on it

[mwinter]

actually its ok, the min-height works now because ive got overflow:hidden on it

Do you mean to say that in order for the effect to work, you had to apply an overflow declaration to the container? If that's the case, then something is probably wrong; the hidden value should be used with care otherwise you may hide content and provide users with no way to access it.

Mike

[gusblake]

yeah. well it works fine in ie, ff and opera and if I take it off i get back the problem of the text flowing off the end of the div... I know what you mean about the hiding content thing though I've had that happen before.

[gusblake]

while I'm here, why doesn't position:fixed or position:absolute work in ie?

[mwinter]

yeah. well it works fine in ie, ff and opera and if I take it off i get back the problem of the text flowing off the end of the div...

Then as I said earlier, please provide a link to an example. If you can't do that, then post a minimal code listing (using the [html]...[/html] pseudo-tags) that demonstrates what you're doing.

while I'm here, why doesn't position:fixed or position:absolute work in ie?

IE is crap. It's as simple as that. However, absolute positioning does work in IE.

Mike