Clarification For Dynamic Height Boxes for CSS

Question

I am having the hardest time trying to figure out this (should be) simple css:

Website is here: http://mibsoftware.us/fct/index.php

I'm simply trying to get my #leftcolumn and #maincolumn to be inside the #content_container, yet whatever I'm doing isn't working at all. I'd like for the #content_container to be a dynamic height since the height of #leftcolumn and #maincolumn change depending on the page you are on.

From the framework of my css it should work fine, so I must be missing something in my .css file declaring these divs. Any help would be greatly appreciated, as this will be a great learning experience for me.

Answer 1

Set overflow:hidden on your #content_container.

Here is a nice resource to learn more about clearing floats and such.

You could also set .clearfix class on your #content_container and define it in CSS like this:

/* Clearing floats without extra markup
   Based on How To Clear Floats Without Structural Markup by PiE
   [http://www.positioniseverything.net/easyclearing.html] */

.clearfix:after, .container:after {
  content: "\0020";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
  overflow:hidden;
}
.clearfix, .container {display: block;}