div positioning problem

my div looks fine when it loads on FF but when it loads on IE you'll see that the left and right divs are far away different from the center div.

the left and right divs are located lower than the center div i think 5 to 10 px away from its original location.

please help me to fix this

here are my css

<style type="text/css">

body
{
    text-align: center;
    font-family: "verdanda", sans-serif;
    color: #a940a9;
    font-size: 12px;
    line-height: 18px;
    background-color: #BBBBBB;
    margin-top: 100px;
    margin-bottom: 100px;
    margin-left: 5px;
    margin-right: 5px;
    padding-left: 5px;
    padding-right: 5px;
}
#header {
    background-color: #C4C4C4;
    margin: 10px;
    padding: 10px;
    height: 100px;
}
#navigation {
    background-color: #C4C4C4;
    position: absolute;
    left: 20px;
    top: 230px;
    height: 600px;
    width: 210px;
}
#content {
    background-color: #C4C4C4;
    position: related;
    top: 0px;
    margin-left: 230px;
    margin-right: 230px;
    height: 600px;
}
#portfolio {
    background-color: #C4C4C4;
    position: absolute;
    right: 20px;
    top: 230px;
    height: 600px;
    width: 210px;
}
#footer {
    background-color: #C4C4C4;
     position: related;
    margin-top: 10px;
    margin-right: 10px;
    margin-left: 10px;
}    
</style>

Code (markup):

 

Write the url of the website. It will easier to help you at that time.