Huh? Valid code doesn't work. Please help.

If you've got Firefox or equivilent please check out allthevoicesinmyhead.com and see how I layed this thing out (client's design, I'm just piecing it together for the web). I don't have Opera or others so I don't know what it'll look like in there.

Okay now go look at the same site again in Internet Explorer.
I have four containers: header, left content right content, and footer. 3 of the four migrated WAY right. Why?

To make it easy for you, here's my CSS:

Quote: #header {
position: absolute;
top: 30px;
background-color: #000;
width: 100%;
height: 185px;
}

#content_AL {
position:absolute;
top:250px;
margin-left: 80px;
width: 280px;
height: 250px;
}

#content_AR {
position:absolute;
top:250px;
margin-left: 400px;
width: 340px;
height: 250px;
}

#footer {
position: absolute;
top: 550px;
left: 25px;
height: 22px;
}

For some unknown reason I used margin-right on the first three elements (the header has it inline) but not on the footer. Logic would say that this has something to do with it but why does everything shift over a full screen width AND when they do line up properly compared to eachother... but way over there on the right? What's going on here?

And as another question, how is this possible in regards to validity and standards? I'm used to sites looking okay in IE but not FF but not the other way around. Mozilla is supposed to be the "right" browser. Since it looks perfect in FF and and all my code is 100% valid XHTML1.1 and CSS, then why should it fall apart in IE (specifically, not just a MS sucks comment).

Thanks.