Wrapper Not Extending Around Columns

Please, for the love of god, somebody help me with this. I’m just about to go out of my mind. I feel like I’ve tried everything, but I just can’t get this to work.

I’m working on a theme with two sidebars. In order to give the sidebars and the blog entries a consistent background (and to have a parent element that’s specific to them), I created a wrapper that I called #blogbody. You can look at the page that I’m working on right here.

The problem is that the wrapper doesn’t seem to be wrapping. If you look at the site, you see a white box at the top of the page, just under the header. That’s the wrapper. The only reason it has any height at all is that I put a non-breaking space in there to make it more visible. I’ve examined the page in Firebug and with the Web Developer toolbar features, and the content is indeed contained within the #blogbody div, and yet it continues to behave as though #blogbody opens and closes before those elements. I’ve checked this in Firefox, Opera, and Safari, and get identical results in all three.

From the research I’ve done via Google, it sounds like this problem is typically indicative of a conflict with floated elements within the div. One of the sources I looked up which seemed to be describing my exact problem recommended inserting the class “floatfix” as a solution. The suggested code is as follows:

/* Fixes #blogbody not clearing inner floats in firefox */
.floatfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

/* Hides from IE-mac \*/
* html .floatfix {
height: 1%;
}
/* End hide from IE-mac */

This changes nothing, in any of the the browsers. Can anyone please help me figure this out? I’m about to go mad here.