Stupid IE: Non-profit needs some css help.

[dtws]

As usual, site looks great in Firefox, but my nav bar is not in the right place when viewed in IE. It should be over on the left but IE puts it to the right.

At first it seemed to be the double-margin problem, but after making some changes that does not seem to be it. I tried adding the "display: inline" but it didn't help so I took it out.

CSS is w3c validated.

Here is the site URL: http://www.socialsomething.com/teammi/
And two screenshots in case you don't feel like looking yourself:
Firefox: http://images.x7web.com/files/zduouwyk19kp31lg7r03.gif
IE: http://images.x7web.com/files/mnyy3ys7q9uvvcpon0bl.gif

Here is my CSS code:

html { 
font: .8em Helvetica, Arial, Tahoma, Verdana, sans-serif;
background-color: #ffffff; 
color: #000; 
margin: 0 auto;
} 
body { 
margin: auto;
padding: 0;
text-align: center;
width: 888px;
background-color: #ffffff;
}
h1 {
  font-size: 1.3em;
  font-weight: bold;
  color: #01356E;
}
a:link {
color: #01356E;
}
a:visited {
color: #0070B6;
}
a:hover {
color: #CC3433;
}
#container {
width: 888px;
margin: 0 auto;
text-align: left;
}
#header {
width: 888px;
}
#header-search {
width: 320px;
margin: 0px;
padding: 0px;
right: 0px;
}
#header-ads {
float: right;
width: 450px;
padding: 0px;
}
#main {
position:relative;
width: 150px
}
#main-1 {
position:absolute;
top:140px;
left:400px;
width:600px;
}
#content {
position:relative;
width: 150px;
text-align: left;
}
#content-1 {
position:absolute;
top:140px;
left:400px;
width:600px;
text-align: left;
}

#nav {
background-repeat: no-repeat;
}
#wholepage {
float: left;
width: 888px;
padding: 12px;
}
#navleft {
float: left;
}
#right {
float: left;
width: 35%;
margin-left: 12px;
} 
#copyright {
padding: 0 3px 0 3px; 
width: 764px; 
clear: both; 
text-align: center; 
margin: 0 6px 0 6px;
}
#email_friend {
font-size: .9em;
font-weight: bold;
}

Thanks for helping out. If you need any other information or code let me know. If this isn't an easy fix, I am willing to pay a bit for a solution.

[Bagi Zoltán]

If you would have set the width values using percentages it would be easier with the absolute positioning, but now I would ask you to try with this

#main {
float:left
width: 150px
}

[dtws]

Wow, thanks

Works great now.

[dtws]

Hmmm

Looks fine for my computer, but when I use another computer with a smaller screen the main text block gets shifted to the right.

This also happens when I make my browser window smaller.

Anyone know why this could be happening?