[CSS/HTML] Tabel probleem

Goedenavond iedereen,

Om maar meteen met de deur in huis te vallen, ik heb een probleem met een tabel. Ik wil mijn content verdelen in, links de tekst (nieuws, etc.) en rechts, advertenties. Nu heb ik dat zo ver alleen stuit ik tegen een probleem aan waar ik niet uit kan komen.

Ik heb 1 DIV, van de hele content, en daar in 2 tabellen gemaakt, en die in css een positie geven, alleen pakt dit niet helemaal zo uit als ik het wil. Zodra ik mijn linker tabel vul met tekst en daarna de zelfde tabel nog eens kopieer, dan gaat mijn rechter tabel mee met de onderste tabel van de linker.

Misschien klinkt dit allemaal een beetje rommelig maar ik geef de code wel even mee en een voorbeeld van wat er gebeurd.

CSS

html{
padding: 0;
margin: 0;
}

body{
margin-right: auto;
margin-left: auto;
font-family: Arial, Veranda;
text-align: center;
font-size: 12px;
}


#total {
font-size: 12px;
font-family: Arial;
position: center;
background-color: #b5b5b5;
width: 875px;
margin-right: auto;
margin-left: auto;
text-align: center;
}

/*BEGIN HEADER */


#header {
background-image: url(header.gif);
background-repeat: no-repeat;
width: 289px;
height: 56px;
float:left;
}


#tussen {
width : 7px;
height: 56px;
background-color: #a5a6a6;
float: left;
}

#midcontent {
width: 280px;
height: 56px;
background-color: #515151;
float: left;
}

#tussenklein {
width: 7px;
height: 56px;
background-color: #a5a6a6;
float:left;
}

#rechtscontent {
text-align: left;
width : 292px;
height : 56px;
background-color: #515151;
float:left;
}


#topleftcontent {
width: 289px;
height: 122px;
background-color: #bababa;
float: left;
}

#toprightcontent {
width: 586px;
height: 122px;
background-color: #bababa;
float: left;
}


#eindheader{
width: 875px;
height: 10px;
background-color: #898383;
float:left;
}

/* END HEADER */

/* BEGIN MENU */

#menu {
width: 875px;
height: 20px;
background-color: #666464;
float: left;
}

ul {
text-align: center;
margin: 0;
padding: 0;
list-style-type: none;
height: 25px;
width: 875px;
}

li {
margin-left: auto;
margin-right: auto;
float: left;
}

ul a {

text-align: center;
}

ul li a:hover
{
display:block;
text-align: center;
width: 94px; 
height: 25px;
text-decoration: underline;
color: #FFFFFF;
}

ul a:visited
{
display:block;
text-align:center;
width: 94px; 
height: 25px;
text-decoration: none;
font-family: Arial;
font-size: 12px;
color: #c1c1c1;
}

ul a:active
{
display:block;
text-align:center;
width: 94px; 
height: 25px;
text-decoration: none;
font-family: Arial;
font-size: 12px;
color: #c1c1c1;
}

ul a:link
{
display: block;
text-align:center;
width: 94px; 
height: 25px;
text-decoration: none;
font-family: Arial;
font-size: 12px;
color: #c1c1c1;
}

/* END MENU */

/* BEGIN CONTENT */

#content { //dit is dus de hele content
min-height: 450px;
height: auto !important;
height: 450px;
width: 875px;
background-color: #b5b5b5;
text-align: left;
float: left;
}


/* EIND CONTENT */

/* FOOTER */

#footer {
width: 875px;
height: 20px;
background-color: #666464;
float: left;
clear:both;
}

/* OPMAAK TABBELEN */
td.rightcontent { // kleur van de td van de rechter tabel
background-color: #939698;
}

table.leftcontent { //deze tabel is voor het nieuws gedeelte
margin-left: 4px;
margin-top: 10px;
margin-bottom: 10px;
background-color: #939698;
font-size: 12px;
width: 650px;
float: left;
}

table.rightcontent { //deze tabel is voor de advertenties
margin-right: 4px;
margin-top: -3px;
font-size: 12px;
width: 200px;
float: right;
}

table.login {
margin-left: 0px;
margin-top: -2px;
}

input.submit {
margin-top: 15px;
float: left;
text-align: center;
}


/* EIND TABELEN OPMAAK */

/* TEKST OPMAAK */
h3.right {
border: 1px solid #000000;
background-image: url(teksth3.gif);
background-repeat: repeat-x;
color: #000000;
font-size: 12px;
margin-top: 10px;
margin-bottom: 0px;
font-weight: bold;
text-align: center;
}

h3 {
border: 1px solid #000000;
background-image: url(teksth3.gif);
background-repeat: repeat-x;
color: #000000;
font-size: 12px;
margin-top: 10px;
margin-bottom: 0px;
font-weight: bold;
}

h2 {
font-size: 10px;
font-family: Arial;
text-align: right;
color: #FFFFFF;
}

h1 {
font-size: 12px;
color: #000000;
font-weight: bold;
}

p.topcontent{
margin-top: 2px;
font-size: 11px;
font-family: Arial;
text-align: center;
color: #FFFFFF;
font-weight: bold;
}

p.leftcontent{
font-size: 12px;
font-family: Arial;
text-align: Left;
color: #FFFFFF;
}


/* EIND TEKST OPMAAK */

Nu had ik in eerste instantie #content verdeeld in 2 containers namelijk, leftcontent en rightcontent, alleen wil ik graag dat mijn pagina dus een bepaalde hoogte standaard heeft, en als ik dus mijn leftcontent vul met tekst, dan loopt die netjes door, alleen omdat mijn rightcontent dus een andere container is, blijft die dus netjes op zijn plaats. Daarom heb ik gekozen voor 1 container.

//EDIT
Met position: relative; werkt het wel in Firefox, alleen in IE8 blijft de tabel zich het zelfde gedragen.
Met position: absolute; wil het ook niet, omdat Firefox zet de tabel in het midden, alleen zet IE8 het weer ergens anders neer.