...

View Full Version : Expanding div?



kaitco
07-15-2007, 03:25 AM
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 (http://www.doriennesmith.com/dorienne/index2.html) 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!

BWiz
07-15-2007, 03:47 AM
It doesn't expand because you've set your li's to float.



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

kaitco
07-15-2007, 04:13 AM
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.

Arbitrator
07-15-2007, 04:43 AM
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 (http://www.doriennesmith.com/dorienne/index2.html) 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 (http://www.complexspiral.com/publications/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.


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


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.


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


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.

kaitco
07-15-2007, 06:05 AM
Wow, thanks a lot! I am always amazed about how little I know about coding after I have been at it for so long.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum