Margin-top possible to be avoided? Making it right in ie & ff?

Hi guys. Another minor issue here.

In FF of course everything is fine. And that's how I'd like it in IE. It's slightly different in IE, the main content area is a bit lower, and the elites is...not "so neat" like in FF.

I used a margin-top of -1245px. Here is my example page (http://jessica-lucas.net/BlueHaze/) and I have the css snippet:

/************************* LAYOUT STRUCTURE // SIDEBAR *************************
----------------------------------------------------------------------------------- */
#sidebarfield {
width: 190px;
float:left;
margin-left: 96px;}

#sidebarfield_inner {
padding: 5px;
}

.sidebar_title {
background: #f6f6f6;
text-align: center;
line-height: 14px;
padding: 3px;
color: #b5a395;
font-weight: bold;
font-size: 10px;
border-bottom: 1px solid #eeeeee;
border-left: 0px solid;
border-top: 0px solid;
border-right: 0px solid;
text-shadow: 1px 1px 0px #696868;
}

.sidefield_content {
font-size: 10px;
font-family: Tahoma;
line-height: 13px;
color: #56514d;
text-align: justify;

}

.current-01 {
background: #eeeeee;
border-bottom: 1px solid #f6f6f6;
font-family: Georgia;
color: #a3a0a0;
font-size: 10px;
text-align: justify;
margin-top: 7px;
margin-bottom: 7px;
padding: 3px;
}

.current-01 img {
background: #f6f6f6;
padding: 2px;
border: 1px solid #d7d2cb;
}

.current-02 {
background: #f6f6f6;
border-bottom: 1px solid #eeeeee;
font-family: Georgia;
color: #938c8c;
font-size: 10px;
text-align: justify;
margin-top: 7px;
margin-bottom: 7px;
padding: 3px;
}

.current-02 img {
background: #eeeeee;
padding: 2px;
border: 1px solid #ccc1b4;
}

.elites {margin: 3px;}

.elites a img {
padding: 2px;
background: #f2f4f6;
border: 1px solid #c8c8c8;
}

.elites a img:hover {
padding: 2px;
background: #d1dfec;
border: 1px solid #91afcd;
}


/************************* LAYOUT STRUCTURE // MAIN CONTENT *************************
----------------------------------------------------------------------------------- */
#contentfield {
width: 551px;
float:left;
margin-left: 195px;
margin-top: -1245px;}

#contentfield_inner {
padding: 5px;
}

Is there a way I can avoid using margin-top for the main content? I'm not sure if there is but I am wondering. Also, if more content is ever added to the side, it messes with the main content making it "go lower" therefore I'd have to re-adjust the numbers again.

And a little off...but how come the images for the "elites" class are fine in FF but not aligned in IE right?

Thanks for any help!

Edit Just in case, my IE version is version 7.0. Not sure if it makes a difference...

You shouldn't need to use a top margin like that at all.

Have a look (& a think) at how your code is structured. If you place the main content after the left column it will help you to sit it in the correct place better. Also if there are any floats in the top section above the main content - clear them first as well.

You should not have to use a huge top margin like that.

I did have a float, didn't think to clear it though.

I did switch up the code, adding the main content before the sidebar (which is on the left) and setting it to float right. Which is working perfect in both IE and FF EXCEPT the padding i have set, gives a good space between the main content and side area FF, but in IE it's too far. How can I get it right in both? Here's the link page (http://jessica-lucas.net/BlueHaze/). Here's the code change:

#contentfield {
width: 551px;
float:right;
margin-right: 0px;
margin-top: 10px;}

#contentfield_inner {
padding: 0px 0px 20px 5px;
}

And the elites, it's good in FF but in IE the first row is spaced ok but the rest looks wrong. How can I fix that as well? Here's the code for elites:

.elites {margin: 3px;}

.elites a img {
padding: 2px;
background: #f2f4f6;
border: 1px solid #c8c8c8;
}

.elites a img:hover {
padding: 2px;
background: #d1dfec;
border: 1px solid #91afcd;
}