This is because you haven’t cleared your floats.
Essentially, the content div only contains items which are floated. Floated items are taken out of the regular flow of the document, thus not giving the content div any height (in other words, the content div doesn’t think it is containing anything).
This is perfectly fine and a tough concept for beginners to wrap their head around. Here’s a great article by Chris: https://css-tricks.com/795-all-about-floats/
The easiest solution for you is adding overflow: hidden; to your div#content.
Another solution would be to add a “clearing div” just before you #content div closes. HTML:
CSS:
.clear { clear: both; }