Floating divs not displayed in IE7

OK I don't see what's wrong here:

https://www.e-capture.net

When browsing this site in IE7, the divs with IDs #blog and #social are not being displayed. The reason seems to be the #content div, which has a different height in IE7 vs IE8/FF/Chrome. But I don't see what I'm doing wrong.

Fun fact: the site displays better in IE6 than it does in IE7 :-)

Any idea开发者_开发知识库s?

Thanks!

I've tested this in IE7 and Firefox.

You just need to move around a bunch of your <div> tags, and add a single new one (highlighted below).

Here's what Firebug looked like after I'd finished:

(I did the same thing in IE7 first, and it fixed your problem. Then, I did the same in Firefox to make sure the fix won't kill it in modern browsers.)

Here's my attempt at a textual description of what I did:

• I moved #blog, #social and #footer respectively to outside and after #content.
• I wrapped a new <div> around #blog and #social, with these styles:
  margin: 0 auto; width: 960px.
• I swapped around a few things concerning #buttons, to make them consistent between FF and IE7:
  • On ul#buttons li, remove margin: 10px 0, and add float: left.
  • On ul#buttons li a, remove float: left and add display: block.