DIVs refuse to follow my stylesheet rules...

[zhono]

Okay. Originally this layout was done with tables. It looked great in Firefox, but IE completely refused to display it anywhere near correct. SO I decided to re-do the whole thing with divs. At first I made one main div to contain everything, and then just put each item on the page into it's own div, and position it exactly where I wanted. That turned into a mess as well. So again, I re-coded it, and this time it's done with divs that are set to act as tables. It's almost there now, but it's still giving me to big problems, and for the life of me, I can't see what's causing them.

http://theanimeasylum.com

As you can see, there is a crap load of extra space under the header, even though I've set that to a height of 479px. And then in the content section, in Firefox the main content is to the right of the Google ad, as it should be, but it's way the heck down there, instead of starting at the top, like the Google ad. And in IE6, it's a similar issue, but it show up underneath the Google ad.

Here's my code: (Don't mind the excessive comments. I always forget to comment my stuff, so I'm trying to get into the habit of commenting everything so I know what's going on.)

My HTML:

This exceeded the character limit for my post. You'll have to just view source on the above link.

My stylesheet:

a:link { 
	color: #FFFFFF;
	text-decoration: underline;
}
a:visited { 
	color: #FFFFFF;
	text-decoration: underline;
}
a:hover { 
	color: #FFFFFF;
	text-decoration: underline;
}
a:active { 
	color: #FFFFFF;
	text-decoration: underline;
}
a img {
    border: 0;
}
body {
	font:normal 12px Verdana;
	color: #FFFFFF;
	background-color: #000000;
}
#headertablediv {
	display: table;
	background-color: #000000;
	margin-left: auto ;
 	margin-right: auto ;
	padding: 0px;
	width: 950px;
	height: 479px;
	border-width: 2px;
	border-bottom-width: 1px;
	border-color: #FFFFFF;
	border-style: solid;
}
#headerrowdiv {
	display: table-row;
}
#headdiv {
	display: table-cell;
	height: 479px;
	width: 950px;
	background-image: url(../images/main.png);
	background-repeat: no-repeat;
}
#wallpaperdiv {
	background-color: #000000;
	margin: 0px;
	padding: 0px;
	height: 130px;
	width: 170px;
	border-top-width: 0px;
	border-right-width: 0px;
	border-bottom-width: 0px;
	border-left-width: 0px;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
	position: relative;
	z-index: 3;
	top: 20px;
	left: 743px;
}
#searchdiv {
	background-color: #000000;
	margin: 0px;
	padding: 0px;
	height: 25px;
	width: 500px;
	border-top-width: 0px;
	border-right-width: 0px;
	border-bottom-width: 0px;
	border-left-width: 0px;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
	position: relative;
	left: 365px;
	top: 290px;
}
#contenttablediv {
	display: table;
	background-color: #000000;
	margin-left: auto ;
 	margin-right: auto ;
	padding: 0px;
	width: 950px;
	height: 100%;
	border-width: 2px;
	border-top-width: 1px;
	border-bottom-width: 1px;
	border-color: #FFFFFF;
	border-style: solid;
}
#contentrowdiv {
	display: table-row;
}
#leftaddiv {
	display: table-cell;
	background-color: #000000;
	width: 120px;
	border-top-width: 0px;
	border-right-width: 2px;
	border-bottom-width: 0px;
	border-left-width: 0px;
	border-top-style: none;
	border-right-style: solid;
	border-bottom-style: none;
	border-left-style: none;
	border-color: #FFFFFF;
}
#contentdiv {
	display: table-cell;
	font:normal 12px Verdana;
	color: #FFFFFF;
	background-color: #000000;
	border-top-width: 0px;
	border-right-width: 0px;
	border-bottom-width: 0px;
	border-left-width: 0px;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
	width: 830px;
}
#contentaddiv {
	display: block;
	float: right;
	margin: 5px 5px 5px 5px;
}
#footertablediv {
	display: table;
	background-color: #000000;
	margin-left: auto ;
 	margin-right: auto ;
	padding: 0px;
	width: 950px;
	height: 25px;
	border-width: 2px;
	border-top-width: 1px;
	border-color: #FFFFFF;
	border-style: solid;
}
#footerrowdiv {
	display: table-row;
}
#footerdiv {
	display: table-cell;
	background-color: #000000;
	margin: 0px;
	padding: 0px;
	height: 25px;
	width: 950px;
	text-align: center;
	border-top-width: 0px;
	border-bottom-width: 0px;
	border-left-width: 0px;
	border-right-width: 0px;
	border-style: solid;
	border-color: #FFFFFF;
}
#animediv {
	height: 173px;
	width: 169px;
	position: relative;
	left: 330px;
	top: -35px;
}
#mangadiv {
	height: 127px;
	width: 120px;
	position: relative;
	left: 542px;
	top: -225px;
}
#aboutdiv {
	height: 52px;
	width: 55px;
	position: relative;
	left: 800px;
	top: -250px;
}
#forumdiv {
	height: 101px;
	width: 99px;
	position: relative;
	left: 673px;
	top: -287px;
}
#wallpapersdiv {
	height: 139px;
	width: 147px;
	position: relative;
	left: 491px;
	top: -358px;
}
#affiliatesdiv {
	height: 111px;
	width: 116px;
	position: relative;
	left: 790px;
	top: -477px;
}
#homediv {
	height: 53px;
	width: 57px;
	position: relative;
	left: 661px;
	top: -520px;
}
.randompic {
	max-width: 170px;
	max-height: 130px;
}

One other thing: Is it possible to get this to work in IE?

.randompic {
	max-width: 170px;
	max-height: 130px;
}

Or is there an alternative to this for IE?

[BigTrees]

It looks fine to me, and consistent between ie and firefox.

Did you fix it or are you still seeing problems?