Why does internet explorer push my content below the sidebar?

Question

HI everyone,

I have a page which displays just fine, in Firefox and Chrome. However, it has the content pushed past the bottom of the sidebar (as if I had a clear) in Internet Explorer 8 (I haven't tested any other IE versions). Does anyone know how to fix this?

The page is located here

Thanks,

Lemiant

Answer 1

For some reason that remains a mystery to me, IE thinks the #content element is wider than it should be. This code did the trick for me:

#content {
  line-height: 18px;
  margin-right: 250px;
  width: 550px;
  width: 497px\9;
}

This makes all browsers use the width of 550px, and IE (all versions), 497px, which seems to be tha maximum it accepts. Hacky, but it works :D

EDIT: You're missing a !doctype. This might be the cause.

Answer 2

You're missing the doctype for you page. Without it, IE will revert to quirks mode, which is essentially IE 5.5's rendering engine.

What you're observing is IE incorrectly computing widths for your elements, see here for a description on how IE 6 and older versions implement width.