I have a very bad problem. I just finished coding my new layout and i work in mozilla so it was all done and i pulled it up and it looked perfect. Then i pulled it up in IE 6 and IE 7 and it all looks terrible. I've seriously never ever seen such a vast difference across browsers, and now i have nooooo idea what I have to do.

heres the new layout.

if any one knows what i can do i would greatly appreciate it. I'm so sad

Here is my CSS as of right now as well.

@charset "utf-8";
/* CSS Document */

body {background-image: url(../img/background.jpg);}

#container {
margin: 0px auto;
width: 873px;
}

#banner {
margin-top: auto;
}

#leftcolumn {
float: left;
}

#rightcolumn {
float: right;
}

#nav {
height: 36px;
width: 843px;
}

#mainarea {
float: none;
}

#blog {
margin-top: -655px;
margin-left: 99px;
width: 444px;
height: 428px;
overflow: auto;
border: none
}

#video {
margin-top: -406px;
margin-left: 614px;
width: 180px;
height: 425px;
overflow: auto;
border: none;
}
thanks alot in advance.