CODEWITHSUNDEEP
htmlcsscss-float
Finding Nemo
Finding Nemo

Reputation: 129

Inner Div not getting parent div height

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.) enter image description here

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/

Upvotes: 1

Views: 2003

Answers (2)

Kennedy Nyagah
Kennedy Nyagah

Reputation: 3645

In your case (from the screen shot) it seems that the inner div is not expanding to the content inside it. Therefore its not a case of having the inner div expand to the height of the outer div but rather have the inner div accept to expand to the content inside it.

therefore I advice you try setting the inner div to contain overflow:auto and remove the height constraint on the outer div to allow infinite growth in height as follows 

.outer {
    background: red;
}
.inner {
    background: green;
    overflow : auto;
}

Upvotes: 0

Anders Arpi
Anders Arpi

Reputation: 8417

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.

Upvotes: 2

Related Questions