IE7 div (within a container) gap and misalisgnment problem

I'm having an issue where IE7 simply will not display my DIV's prope开发者_如何学Pythonrly..Firefox 3, Safari, Opera, Chrome, IE8 and even IE6 (with some JS help) display the page fine, but for some reason, in IE7 the footer seems to be...outside of the container. You can clearly see a gap between the footer and the #content div in the below screenshot. There is also some misalignment from the #information div down.

The link to the live site is: http://chronologic.ath.cx.

I can almost guarantee the issue is caused by my complete lack of understanding of CSS, so I apologize for the messy bloated markup.

Just took a quick look, but you may want to rethink applying height: 100% to div#container. Older versions of IE frequently don't behave as expected and take 100% to mean the width or height of the page, not the container that it is in. I can't verify this though without further investigation.

It looks like an issue of clearing floats because both elements inside of #footer are floated. Try adding #footer { overflow:hidden; }.

overflow:hidden clear:both and making sure you have reset your HTML with html { padding: 0; margin: 0;} should fix it