Two general DIV behavior questions
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.
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.
Thanks! So then you would use something like:
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?
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.
Users Browsing this Thread
There are currently 1 users browsing this thread. (0 members and 1 guests)