Outer div not expaning in height with innner divs

Question

In the following code the div content-container is not expanding in its height as increase in the height of the divs inside it. I want to make its height auto increment with the increase in height of inner divs

This id my css code

body{
    margin:0;
    padding:0;
    line-height: 1.5em;
    background:#f7f7f7;
}

b{font-size: 110%;}
em{color: red;}

#maincontainer{
    width: 1000px; /*Width of main container*/
    margin: 0 auto; /*Center container on page*/
}

#topsection{
    background: #f0f0f0;
    height: 90px; /*Height of top section*/
}

#topsection h1{
    margin: 0;
    padding-top: 15px;
}

#content-container{
    float:left;
    width:100%;
    background:#f8f8f8;
    border:1px solid #f0f0f0;
    margin-top:-22px;
    margin-left:-1px;
    height:auto;
}

#contentwrapper{
    float: left;
    width: 100%;    
}

#contentcolumn{
    margin-right: 310px; /*Set right margin to RightColumnWidth*/
    background:none;
    padding:15px;
    clear:both;

}

#rightcolumn{
    float: left;
    width: 310px; /*Width of right column*/
    margin-left: -311px; /*Set left margin to -(RightColumnWidth) */
    background: none;
    padding-top:20px;
    margin-top:1px;
    border-left:1px solid #222222;

}

#rightcolumn h2{
    font:18px georgia;
    font-weight:bold;
    border-bottom:2px solid #222222;
}


#footer{
    clear: left;
    width: 100%;
    background: black;
    color: #FFF;
    text-align: center;
    padding: 4px 0;
}

#footer a{
    color: #FFFF80;
}

.innertube{
    margin: 10px; /*Margins for inner DIV inside each column (to provide padding)*/
    margin-top: 0;
}  

body{
    margin:0;
    padding:0;
    line-height: 1.5em;
    background:#f7f7f7;
}

b{font-size: 110%;}
em{color: red;}

#maincontainer{
    width: 1000px; /*Width of main container*/
    margin: 0 auto; /*Center container on page*/

}

#topsection{
    background: #f0f0f0;
    height: 90px; /*Height of top section*/
}

#topsection h1{
    margin: 0;
    padding-top: 15px;
}

#content-container{
    float:left;
    width:100%;
    background:#f8f8f8;
    border:1px solid #f0f0f0;
    margin-top:-22px;

    margin-left:-1px;
    height:auto;

}

#contentwrapper{
    float: left;
    width: 100%;

}

#contentcolumn{
    margin-right: 310px; /*Set right margin to RightColumnWidth*/
    background:none;
    padding:15px;
    clear:both;

}

#rightcolumn{
    float: left;
    width: 310px; /*Width of right column*/
    margin-left: -311px; /*Set left margin to -(RightColumnWidth) */
    background: none;
    padding-top:20px;
    margin-top:1px;
    border-left:1px solid #222222;
}

#rightcolumn h2{
    font:18px georgia;
    font-weight:bold;
    border-bottom:2px solid #222222;
}


#footer{
    clear: left;
    width: 100%;
    background: black;
    color: #FFF;
    text-align: center;
    padding: 4px 0;
}

#footer a{
    color: #FFFF80;
}

.innertube{
    margin: 10px; /*Margins for inner DIV inside each column (to provide padding)*/
    margin-top: 0;
}

HTML code

<div id="maincontainer">    
   <div id="topsection"><div class="innertube"><h1>CSS Fixed Layout #2.2- (Fixed-Fixed)</h1></div>
</div>

<div id="content-container">
   <div id="contentwrapper">
    <div id="contentcolumn">
      <div class="innertube">
         content here
      </div> 
    </div>
   </div>
</div>

<div id="rightcolumn">
    <div class="innertube">
      content here
    </div>
</div>
</div>

   <div id="footer"><a href="#">UIasdfg</a></div>
</div>

It should be this issue http://stackoverflow.com/questions/16568272/how-css-float-works-why-height-of-the-container-element-doesnt-increase-if-it/16568504#16568504 — Mr. Alien, Dec 27 '13 at 07:22
it is not working. try putting some content in the rightcolumn div or contentcolumn div . the content-container height do not increase with the increase in height of these two divs — Alex, Dec 27 '13 at 07:36
It does not effect anything, but why do you have 3 containers for innertube? — Michael Falciglia, Dec 27 '13 at 07:45

score 0 · Answer 1 · answered Dec 27 '13 at 07:35

Demo

Your code seems to work fine, only minor tips to work it smoothly :

give body height:100%;
In the class innertube, use a paragrap to show the content, this way, u'll achieve a better flexibilty in showing big text paras. use word-break: break-all for para

like this

<div class="innertube"> <p style="word-break: break-all;"> content here content here content here content here content here content here content here content here content here </p> </div>

and clear:both to clear all floats in the end :

</div> <!-- #content-container -->
 <div style="clear:both"></div>

@Alex : whats the issue that you are getting...fiddle seemed to work fine, can you show your problem in fiddle please? — NoobEditor, Dec 27 '13 at 10:16

score 0 · Answer 2 · edited May 23 '17 at 11:56

Ok, I think I figured it out. Using the same JsFiddle I created... I added a small tweak to only one of your CSS elements, which is below. We went from:

   #contentcolumn {
       margin-right: 310px;
       /*Set right margin to RightColumnWidth*/
       background:none;
       padding:15px;
       clear:both;
   }

and then all i added was a simple display which ended up being:

   #contentcolumn {
       margin-right: 310px;
       /*Set right margin to RightColumnWidth*/
       background:none;
       padding:15px;
       clear:both;
    display:inline;
   }

This enables whatever is inside of that div to maintain being inside of that div. Here is the demo that provides a better example of what I am saying.

A few things to note, I did add in a background color so that you could effectively see what was changing, as well as I added a height, which doesn't need to be there.. again, I added that to show you what was happening with the innermost div.

One really awesome tool that can help you understand why this works is the Almanac, which will show you many tools to help you with any CSS needs. I do want to point out that @Mr.Alien's stack question is another resource that is well beyond the Almanac's explanation. Let me know if you need anything else :)

Outer div not expaning in height with innner divs

2 Answers2