Div within Div stretching_问答_开发者_运维开发者技术经验分享

开发者 https://www.devze.com 2023-02-07 20:02 出处：网络

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

相关专题：css

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