Problem with a simple template on CSS

It looks like you have an extraneous </div>, which is one problem :) It's removed in the fiddle below.

If you're using floating elements, which you are, you will need to clear those floats in order for the container to 'stretch' to the bottom of the content.

An easy way to do that is create a new class called "clear" or something similar with the following:

.clear {
    clear:both;
}

However, the downside is that you're introducing a new dom element simply to modify the layout.

Another solution (courtesy of Quirksmode http://www.quirksmode.org/css/clearing.html) is to tell the containing element to deal with these floated elements:

#container {
    ....old code...
    overflow: auto;
    width: 100%;
}

This has a few quirks under certain circumstances, so it's up to you which you choose to use.

See the fiddle here: http://jsfiddle.net/callseng/kZB5j/

This uses the clear element method.