Container <div> won't contain

[Gustaf]

I'm sure I've got this working before, but I always forget how to do it,
because CSS isn't intuitive in this case. I got a simple 2 column layout:

<div id="container" >
<div id="left">

</div>
<div id="right">

</div>
</div>

The #container div *contains* #left and #right, thanks to the
encapsulation principle of XML. However, when I add borders or
backgrounds to the divs, it's evident that only IE gets this
relationship. The otherwise standard-conformant browsers are squeezing
in an empty #container div at the top, *before* the other two. Why is
this, and what's the workaround/sanctioned way to do it?

There's an example here for anyone to play with:

http://gusgus.cn/temp/index.html

http://gusgus.cn/temp/titlepage.css

Gustaf

[David Dorward]

Re: Container &lt;div&gt; won't contain

Gustaf wrote:[color=blue]
> The #container div *contains* #left and #right, thanks to the
> encapsulation principle of XML. However, when I add borders or
> backgrounds to the divs, it's evident that only IE gets this
> relationship. The otherwise standard-conformant browsers are squeezing
> in an empty #container div at the top, *before* the other two. Why is
> this, and what's the workaround/sanctioned way to do it?[/color]

Bug in IE. Floating elements takes them out of normal flow.

http://www.complexspiral.com/publications/containing-floats/

[Andy Dingley]

Re: Container &lt;div&gt; won't contain


Gustaf wrote:[color=blue]
> I'm sure I've got this working before, but I always forget how to do it,
> because CSS isn't intuitive in this case. I got a simple 2 column layout:[/color]

http://brainjar.com/css/positioning/

[color=blue]
> The otherwise standard-conformant browsers are squeezing
> in an empty #container div at the top, *before* the other two.[/color]

They all (including IE) place the outer <div>, as it ought to be,
outside and around the inner <div>s, not "before" the inner <div>s.
However owing to IE's flakey handling of float it gets the vertical
extent of the outer <div> wrong (too big). Correct behaviour is to
treat it as empty and collapse it to a mere horizontal line, which
naturally then appears to be "before" its children.

Floated elements can extend downwards out of their parent container.
This is correct and necessary behaviour, as described here:

http://brainjar.com/css/positioning/default3.asp

This is so that floats can be of large vertical extent, floating
alongside many other elements. IE is broken.

If you want a real browser to work as IE does anyway, then place an
element after the floated <div>s but within their container, don't
float it and do use clear on it. This forces the outer container to
stretch downwards and wrap entirely around its children. This
additional clear is safe with IE.

[Gustaf]

Re: Container &lt;div&gt; won't contain

Andy Dingley <dingbat@codesm iths.com> wrote:
[color=blue]
> If you want a real browser to work as IE does anyway, then place an
> element after the floated <div>s but within their container, don't
> float it and do use clear on it.[/color]

Thanks both of you. Great articles and explanation!

Gustaf

[Tony]

Re: Container &lt;div&gt; won't contain

Andy Dingley <dingbat@codesm iths.com> wrote:
[color=blue]
> If you want a real browser to work as IE does anyway, then place an
> element after the floated <div>s but within their container, don't
> float it and do use clear on it.[/color]

And watch all your text disappear in IE

http://www.positioniseverything.net/explorer/peekaboo.html

--
"The most convoluted explanation that fits all of the made-up facts is
the most likely to be believed by conspiracy theorists. Fitting the
actual facts is optional."