Two general DIV behavior questions

[anw]

Just when I seem to understand this layout with divs it seems again to elude me. Could someone please answer the following questions definitively:

1. When does a div "shrink wrap" its contents, and when does it expand to fill its container? I thought a div always expanded to fill its container, but I'm not now so sure, since I think I've seen it do otherwise.

2. How can you force the elements in a div to stay on the same horizontal line, stretching the parent if necessary, and expanding the window or adding a scroll bar if necessary?

I know these are basic questions, but I'm doing a (large) personal site and have still missed something here.

TIA,
anw

[Centauri]

A div, like any block level element, will expand horizontally to fill its container. The only times a div will shrinkwrap is if it is floated or positioned absolutely, both of which take the div out of the normal document flow.

You can force a horizontal line with white-space:nowrap. The div will only expand with contents if it is floated or absolutely positioned (with no width set). If the div has a fixed width, contents that are too wide will spill out side the div (except in that POS IE6). Overflow:auto will produce scrollbars if necessary.

[anw]

Thanks! So then you would use something like:

.myDiv
{
white-space:nowrap;
}

And, for the overflow, if I used overflow:hidden, it would just truncate anything longer than the div, without running outside it? Does it matter if that div is floated or otherwise positioned or not?

Thanks again!

[Centauri]

Yes, that css will prevent wrapping.

The overflow property will come into play whenever the div has a set width or is constrained by its container, and the hidden attribute will truncate oversized content.