Right div appearing below center div in ie7 not ff

hello, ive searched this thread and covered most of the topics regarding alignment problems in ie7. i cannot see to fix this issue. im new to css and this is my first tableless site. can you please check it out and let me know.. thank you
site is p.opu.lar.vir.als.com http://img131.imageshack.us/my.php?image=64442880sb6.jpg

@charset "utf-8";

.html, .body {
height: 100%;
background-image: url(../background.jpg);
margin: 0;
padding: 0;
}
.container {
width: 950px;
min-height: 100%;
font-family: Arial, Helvetica, sans-serif;
margin-top: 10px;
margin-bottom: 30px;
text-align: center;
font-size: 12px;
background-color: #000000;
}
.header {
width: 950px;
height: 110px;
padding-top: 10px;
font-size: 40px;
text-align: center;
background-color: #000000;
}
.ads-header {
width: 950px;
height: 260px;
padding-top: 10px;
}
.ads-header-left {
height : 251px;
float : left;
padding : 5px;
padding-top : 2px;
}
.ads-header-middle {
height: 251px;
float: left;
margin-left: 10px;
padding: 5px;
padding-top: 2px;
}
.ads-header-right {
height : 251px;
float : right;
padding : 5px;
padding-top : 2px;
}
.friends-links-top {
width: 950px;
height: 25px;
text-align: center;
padding-top: 2px;
font-size: 16px;
background-color: #000000;
}
.friends-links-top a {
color: #ffffff;
}
.friends-links-top a:hover {
font-weight: bold;
}
.friends-links-bot {
width: 950px;
height: 25px;
text-align: center;
padding-top: 2px;
font-size: 16px;
background-color: #000000;
}
.friends-links-bot a {
color: #ffffff;
}
.friends-links-bot a:hover {
font-weight: bold;
}
.main-content {
display: table;
width: 950px;
height: auto;
color: #ffffff;
background-color: #000000;
}
.main-content-row {
display: table-row;
height: auto;
width: 950px;
}
.graphics-container {
display: table;
}
.graphics-container-row {
display: table-row;
}
.graphics-container-cell {
vertical-align: middle;
text-align: center;
font-size: 16px;
padding-top: 10px;
padding-left: 5px;
padding-right: 5px;
font-family: Arial, Helvetica, sans-serif;
color: #33CCFF;
}
.left-content {
float: left;
width: 160px;
color: #ffffff;
background-color: #000000;
font-size: 13px;
padding-top: 10px;
padding-bottom: 20px;
}
.left-content a {
color: #ffffff;
line-height: 17px;
text-decoration: none;
}
.left-content a:hover {
font-weight: bold;
text-decoration: none;
}
.right-content {
float: right;
vertical-align: top;
width : 160px;
color: #ffffff;
background-color: #000000;
padding-top: 10px;
padding-bottom: 20px;
}
.right-content a {
color: #ffffff;
line-height: 17px;
text-decoration: none;
}
.right-content a:hover {
font-weight: bold;
text-decoration: none;
}
.middle-content {
display: table-cell;
vertical-align: top;
margin-left: 160px;
margin-right: 160px;
width: 600px;
color: #ffffff;
font-size: 14px;
background-color: #000000;
}
.cat-title {
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
color: #33FF00;
font-weight: bold;
}
.ads-footer {
clear: both;
width: 940px;
height: 105px;
padding: 5px;
padding-top: 10px;
background-color: #99cccc;
}
.footer {
height: 50px;
position: relative;
bottom: -50px;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
color: #000000;
font-size: 12px;
}
.bar-content {
color: #000000;
}
.bar-content a {
color: #33CCFF;
}
.bar-content a:hover {
color: #33CCFF;
font-weight: bold; 
}

Code (markup):

 

It is most probably that the total width of left div and right div have exceed the wraper div/container .

 

I cannot emphasize enough, and I see this mistake over and over again, people using IE as a reference for how things should work, but IE is 10 years behind web standards so they are referencing the worst browser on the planet. Always, always use a modern browser, meaning anything but IE.

'ID's are only allowed once per page. You are using them multiple times. To do that, you should be using 'class'. You can try changing your ids to class and seeing if that fixes it as it is right now.

 

hello, i have tried making the container oversized to see if that was it but didnt help. thank you

i did not state that ie should be used as a reference for how something should work. but you still have to make sure your site appears correctly in the browser. i have removed the ids, didnt change the layout though. thank you

 

If you used Firefox to design it, how did it wind up working wrong there but correctly in IE?

I'll look at it to see what is wrong still.

 

yes i used ff to design it and it is correct in ff, it is wrong in ie. thank you for your time

 

You have mismatched ending div tags which may or may not be adding to the problem but it messes up Firebug when I try and edit it. Validate for your list of html errors that still exist.

 

ive fixed some of the errors but the remaining ones i dont get. im using the w3 validator. i will spend more time on it after lunch.. thank you

 

The problem you are having is in your css with 'display:table-row'. Remove that. It's a CSS attribute but does not work in IE and does work in FF. IE is ignoring the attribute while FF is doing what you wrote (as always, IE is 10 years behind the times).

 

ive deleted all the display table objects and still same result in ie. with those removed, ff now displays the same as ie, just as you stated it would. thank you

 

ive modified the site a little and got rid of some extra divs that were not necessary. i dont see where i can edit my orig post so here is my new css.

@charset "utf-8";

.html, .body {
height: 100%;
background-image: url(../background.jpg);
margin: 0;
padding: 0;
}
.container {
width: 950px;
min-height: 100%;
font-family: Arial, Helvetica, sans-serif;
margin-top: 10px;
margin-bottom: 30px;
text-align: center;
font-size: 12px;
background-color: #000000;
}
.header {
width: 950px;
height: 110px;
padding-top: 10px;
font-size: 40px;
text-align: center;
background-color: #000000;
}
.ads-header {
width: 950px;
height: 260px;
padding-top: 10px;
}
.ads-header-left {
height : 251px;
float : left;
padding : 5px;
padding-top : 2px;
}
.ads-header-middle {
height: 251px;
float: left;
margin-left: 10px;
padding: 5px;
padding-top: 2px;
}
.ads-header-right {
height : 251px;
float : right;
padding : 5px;
padding-top : 2px;
}
.friends-links-top {
width: 950px;
height: 25px;
text-align: center;
padding-top: 2px;
font-size: 16px;
background-color: #000000;
}
.friends-links-top a {
color: #ffffff;
}
.friends-links-top a:hover {
font-weight: bold;
}
.friends-links-bot {
width: 950px;
height: 25px;
text-align: center;
padding-top: 2px;
font-size: 16px;
background-color: #000000;
}
.friends-links-bot a {
color: #ffffff;
}
.friends-links-bot a:hover {
font-weight: bold;
}
.main-content {
width: 950px;
height: auto;
color: #ffffff;
background-color: #000000;
}
.left-content {
width: 160px;
float: left;
color: #ffffff;
background-color: #000000;
font-size: 13px;
padding-top: 10px;
padding-bottom: 20px;
}
.left-content a {
color: #ffffff;
line-height: 17px;
text-decoration: none;
}
.left-content a:hover {
font-weight: bold;
text-decoration: none;
}
.right-content {
width : 160px;
color: #ffffff;
background-color: #000000;
padding-top: 10px;
padding-bottom: 20px;
}
.right-content a {
color: #ffffff;
line-height: 17px;
text-decoration: none;
}
.right-content a:hover {
font-weight: bold;
text-decoration: none;
}
.middle-content {
margin-left: 160px;
margin-right: 160px;
width: 600px;
color: #ffffff;
font-size: 14px;
background-color: #000000;
}
.graphics-container-cell {
vertical-align: middle;
text-align: center;
font-size: 16px;
padding-top: 10px;
padding-left: 5px;
padding-right: 5px;
font-family: Arial, Helvetica, sans-serif;
color: #33CCFF;
}
.cat-title {
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
color: #33FF00;
font-weight: bold;
}
.ads-footer {
clear: both;
width: 940px;
height: 105px;
padding: 5px;
padding-top: 10px;
background-color: #99cccc;
}
.footer {
height: 50px;
position: relative;
bottom: -50px;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
color: #000000;
font-size: 12px;
}
.bar-content {
color: #000000;
}
.bar-content a {
color: #33CCFF;
}
.bar-content a:hover {
color: #33CCFF;
font-weight: bold; 
}

Code (markup):

 

First, to the right content add 'float:right'. Then the easiest thing to do is contain your Google ads and Welcome message in their own div above your left/center/right content. That will prevent the right one from creeping up.

 

thanks dr fine, ill try it out.

 

i just took out the adsense and added the float to the rightcontent... still same result. that right content just doesn't want to align to the top of the other divs.

 

seems like i found out where the problem was.. it lied in the placement of my html coding. i had the code as shown

<div class="left-content"><?php include "left-nav-col.php"; ?></div>        	
<div class="middle-content"><?php include "middle-nav-col.php"; ?></div>
<div class="right-content"><?php include "right-nav-col.php"; ?></div>

Code (markup):

the code should have been

<div class="left-content"><?php include "left-nav-col.php"; ?></div>        	
<div class="right-content"><?php include "right-nav-col.php"; ?></div>
<div class="middle-content"><?php include "middle-nav-col.php"; ?></div>

Code (markup):

for those that helped, thank you for putting time in, espcially dr fine