www.webdeveloper.com
Results 1 to 4 of 4

Thread: Two general DIV behavior questions

  1. #1
    Join Date
    Mar 2007
    Posts
    50

    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.

    TIA,
    anw

  2. #2
    Join Date
    Mar 2006
    Location
    Newcastle NSW Australia
    Posts
    4,033
    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.

  3. #3
    Join Date
    Mar 2007
    Posts
    50
    Thanks! So then you would use something like:
    Code:
    .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!

  4. #4
    Join Date
    Mar 2006
    Location
    Newcastle NSW Australia
    Posts
    4,033
    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.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles