Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5

Thread: Expanding div?

  1. #1
    Regular Coder
    Join Date
    Dec 2005
    Location
    Ohio
    Posts
    286
    Thanks
    7
    Thanked 9 Times in 9 Posts

    Expanding div?

    I hate to even ask this question because I know I have seen it covered a dozen times, but I cannot figure out this one:

    Here is the page and I cannot figure out how to make the nested div expand as the content does. Also, I am also having trouble making the content that follows the "facts" div fall beneath it instead of beside it.

    I have searched and searched, and I am still ready to just tear my hair out over this. I have a feeling it is something simple I am missing, but I cannot figure out this.

    Many thanks!

  • #2
    Regular Coder BWiz's Avatar
    Join Date
    Mar 2006
    Location
    Sol System
    Posts
    471
    Thanks
    7
    Thanked 21 Times in 21 Posts
    It doesn't expand because you've set your li's to float.

    Code:
    #facts li {
    	list-style-type: none;
    	display: inline;
    	float: left;
    	padding: 0 0 0 .3em;
    	}
    Because of this, the parent <div> will not expand to fit it all in. You could remedy this setting a height.
    BWiz :: Happy Coding!
    2006
    2007 2008 2009
    2010 2011
    Irrational numbers make no sense.

  • #3
    Regular Coder
    Join Date
    Dec 2005
    Location
    Ohio
    Posts
    286
    Thanks
    7
    Thanked 9 Times in 9 Posts
    Where would I add the height and to what would I set it? I have tried adding height: 100% to the "facts," "middle," and "container" div's, but there has not been any effect.

  • #4
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,277
    Thanks
    28
    Thanked 272 Times in 266 Posts
    Quote Originally Posted by kaitco View Post
    I hate to even ask this question because I know I have seen it covered a dozen times, but I cannot figure out this one:

    Here is the page and I cannot figure out how to make the nested div expand as the content does.
    Floats do not automatically make their parent elements expand to contain them. Read Containing Floats for an explanation regarding the why. One technique to force them to do so is to use overflow: auto on the parent element.

    Code:
    #facts ul { overflow: auto; }
    It works because no content can escape the boundaries of an element with overflow set to a value other than visible, so the element is forced to contain any floated child elements that would otherwise escape.

    Quote Originally Posted by kaitco View Post
    Also, I am also having trouble making the content that follows the "facts" div fall beneath it instead of beside it.
    You can make content clear a float by using the clear property.

    Code:
    #facts + p { clear: left; }
    Note that the adjacent sibling combinator (+) is not supported by Internet Explorer 6, so you’ll have to use class or ID selectors for that browser.

    Quote Originally Posted by kaitco View Post
    Where would I add the height and to what would I set it? I have tried adding height: 100% to the "facts," "middle," and "container" div's, but there has not been any effect.
    height: 100% only works when a parent element has an explicit height specified. If the height is dynamically determined by content, then it does nothing.

    The one exception is the viewport (the area through which you view documents in the browser), which gets treated as if it had an explicit height set. html { height: 100%; } causes the html element to match the height of the viewport and specifying that declaration on immediate children elements will cause them to do the same.
    Last edited by Arbitrator; 07-15-2007 at 04:45 AM.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #5
    Regular Coder
    Join Date
    Dec 2005
    Location
    Ohio
    Posts
    286
    Thanks
    7
    Thanked 9 Times in 9 Posts
    Wow, thanks a lot! I am always amazed about how little I know about coding after I have been at it for so long.


  •  

    Posting Permissions

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