Div within Div stretching
I'm designing a site, and doing a bunch of work with the styling at the moment. It开发者_JAVA百科 has a 3 column layout (two large content columns, one small navbar column) and a few "wrapper" divs that exist just for aesthetic purposes. The HTML looks something like this:
<div id="out_wrapper">
<div id="in_wrapper">
<div id="nav"> ... content ... </div>
<div class="column"> ... content ... </div>
<div class="column"> ... content ... </div>
</div>
</div>
Each of the divs area fixed width, but I want them to be a variable height to account for an increased amount of content. I'd like the height of the in_wrapper and out_wrapper to be slightly larger than the divs they contain, and I can't seem to get it to work. I've tried setting min-height instead of height, and removing the height property altogether, but I can never get in_wrapper or out_wrapper to stretch to the content. The columns stretch just fine.
Alternatively, I could set the overflow to auto and allow scrolling, which would keep the site at a fixed size, but that seems to be the less desirable outcome.
The site uses <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> by requirement, if that makes a difference.
Set the height of the two wrappers to auto and add padding to the bottom. Also, overflow:hidden if the children are floating.
#out_wrapper, #in_wrapper { height:auto;padding-bottom:10px;overflow:hidden;}
If a parent tag is not stretching to surround a child tag, then the child has most likely been taken out of the normal flow of the document (through float or positioning); you need to bring the child back into the flow. There are a few ways to do this:
Adding the style overflow:auto to the container element where the elements are floated.
Adding a non-semantic 'clearer' div after the floated content: <div style="clear:both"></div>
Making the parents a positioned element as well: position:relative;
Have you tried adding a cleared div after all the columns? Like
<div style="clear:both"></div>
That will pull the containers down to the total height. Then add some margin and/or padding to create that extra space.
加载中,请稍侯......
精彩评论