Parent div not expanding to children's height

Question

As you will see, I have a div (#innerPageWrapper) that wraps around the divs that contain the content. #innerPageWrapper also does act visually as a semi-transparent border in the layout.

My problem is that #innerPageWrapper won't expand to fit the children inside, let alone expand to fill the rest of the page.

This is the code for #innerPageWrapper

#innerPageWrapper {
    width: 1100px;
    height: 100%;
    display: inline-block;
    padding: 0 50px 0 50px;
    background: rgba(0, 0, 0, 0.75) url(navShadow.png) repeat-x top;
    -webkit-border-top-left-radius: 20px;
    -webkit-border-top-right-radius: 20px;
    -moz-border-radius-topleft: 20px;
    -moz-border-radius-topright: 20px;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
}

I have tried many things (including using calc() for div heights) unsuccessfully. I want to avoid using jQuery.

Answer 1

Firstly, you are using height:100%; which in your case is wrong. For an explanation on why not to use height:100%, check this article;

To understand why, you need to understand how browsers interpret height and width. Web browsers calculate the total available width as a function of how wide the browser window is opened. If you don't set any width values on your documents, the browser will automatically flow the contents to fill the entire width of the window.

But height is calculated differently. In fact, browsers don't evaluate height at all unless the content is so long that it goes outside of the view port (thus requiring scroll bars) or if the web designer sets an absolute height on an element on the page. Otherwise, the browser simply lets the content flow within the width of the view port until it comes to the end. The height is not calculated at all. The problem occurs when you set a percentage height on an element who's parent elements don't have heights set. In other words, the parent elements have a default height: auto;. You are, in effect, asking the browser to calculate a height from an undefined value. Since that would equal a null-value, the result is that the browser does nothing.

Secondly, to make the outer-div (in this case #innerPageWrapper) wrap around the child elements, you should use overflow:hidden on this wrapper.

For this to successfully work, your child elements must not be position:absolute as you have for #contentMain and #contentSidebar, instead make these floats (float:left and float:right) and after the #contentSidebar div closes, add a <div style="clear:both"></div> to clear floats, allowing the parent to wrap around them perfectly.

I have put the required CSS in this Pastebin, note that you must clear your floats using a div as I mentioned above.

Answer 2

Try setting width and height of the parent element to auto. Simplified example:

http://jsfiddle.net/kimgysen/8nWDE/

#innerPageWrapper {
    width:auto;
    height:auto;
    background:red;
}

#innerPageWrapper p{
    width: 100px;
    height: auto;
    margin: 10px auto;
    background: yellow;
}

Edit:

Check this fiddle for a more advanced example, including horizontal and vertical center: http://jsfiddle.net/kimgysen/8nWDE/1/

The parent element will dynamically adapt to the bounds of the child elements.
You can also set dynamic width and height on child elements.

.outerDiv{
    display: table-cell;
    background-color: yellow;
    width: auto; 
    height: auto;
    vertical-align: middle;
    text-align: center;
}

.innerDiv{
    display: inline-block;
    background-color: red; 
    width: 100px;
    height: 100px;
    margin: 20px;
}