Home/ Questions/Q 3961562
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-20T02:59:24+00:00

I’m designing a site, and doing a bunch of work with the styling at

  • 0

I’m designing a site, and doing a bunch of work with the styling at the moment. It 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.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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;}
    • 0