Container <div> won't contain

Thread view:

Enable EMail Alerts

Start New Thread

Thread rating:

Gustaf - 27 Jun 2006 14:57 GMT

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

Reply to this Message

David Dorward - 27 Jun 2006 15:29 GMT

> 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?

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

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

Reply to this Message

Andy Dingley <dingbat@codesmiths.com> - 27 Jun 2006 15:32 GMT

> 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:

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

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

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.

Reply to this Message

Gustaf - 27 Jun 2006 20:08 GMT

> 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.

Thanks both of you. Great articles and explanation!

Gustaf

Reply to this Message

Tony - 27 Jun 2006 21:28 GMT

Andy Dingley <dingbat@codesmiths.com> wrote:

> 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.

And watch all your text disappear in IE
http://www.positioniseverything.net/explorer/peekaboo.html

Signature

"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."

Reply to this Message

Webmaster Forum / HTML, CSS, Scripts / CSS / June 2006

Container <div> won't contain