Outer div not expaning in height with innner divs - html

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">UIasdfg</div>
</div>

Answer 1

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>

Answer 2

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 :)