Question

I have an outer div with a few inner divs like this:

HTML:

<div class="clearfix bigBox">
   <div class="bigBoxBody">
      <div class="containerWithHeaderContent">
      </div>
   </div>
</div>

CSS:

#content .bigBox {
    padding-bottom: 9px;
    width: 100%;
}
#content .containerWithHeader, .containerWithHeaderContent {
    padding: 10px 0;
    width: 100%;
}

.clearfix:after {
    clear: both;
    content: " ";
    display: block;
    font-size: 0;
    height: 0;
    line-height: 0;
    visibility: hidden;
    width: 0;
}

My problem is that the inner div (bigBoxBody) does not seem to be getting the height in line with the height of the outer div (bigBox).

Screen shot:

(The outer div is red, and the inner div is green.)

I am not sure what is wrong with this, or if there are any other things that need to be taken care of using CSS.

jsFiddle: http://jsfiddle.net/UFFx3/2/

Answer 1

The divs won’t naturally occupy the full vertical space available to them. See this jsfiddle for an example. The outer div is given an explicit height of 100 pixels, and the inner div has no height specified at all. The inner div thus only take up the space needed to display its contents.

HTML:

<div class="outer">
   <div class="inner">
       <p>Content here!</p>       
   </div>
</div>​

CSS:

.outer {
    background: red;
    height: 100px;
}
.inner {
    background: green;
}

​
If you want the inner div to take up all the vertical space available, set height:100% in the CSS. See this jsfiddle for an example.

New CSS:

.outer {
    background: red;
    height: 100px;
}
.inner {
    background: green;
    height: 100%; /* new line */
}

I’m not sure if there are any more specifics to your problem as you are using a clearfix CSS class that isn’t shown in your example. Please let me know if there’s something else missing for you to solve your problem.