Am Missing an Obvious CSS Error

Even though everything validates (well, except for the slideshow embed in the header, but that has nothing to do with my problem), I am still having a problem with a simple situation.

Jerry Jordan for District Court Judge | Forsyth County, North Carolina
http://www.jordan4judge.com/sitestyle.css

The #main is the one with the soft gray border. It’s supposed to go around the Content (float:left) and the #social (sidebar) (float:right).

The #header and #footer are outside the #main, respectively. And #wrapper hold all of them together.

This is going to be the template for all pages of the site. Since the content of the Content is going to be fluid in length, the #main needs to expand vertically - so I can not do a min-height since I really don’t know what that will be.

Also, the sidebar will also contain Facebook and Flickr widgets, in addition to the current Twitter one - hence why the div is called #social.

I’ve done this sort of layout often and yet there is something obviously missing that is causing the Content and #social (sidebar) to "jump outside of the #main.

Would love for someone to point out my obvious mistake … the coding is so simple that I know it is something obvious that I just can’t see. :nono:

I was looking around at some other threads just for learning sake and ideas and found the following post that ended up solving my problem:

Thank you so much to all those who contribute on this forum … you’ve been a lifesaver many many times. :smiley:

Glad you got it sorted, Barbara. :slight_smile: