crazy tableless

mis principios en la maquetacion sin tablas no estan siendo todo lo adecuado que desearia :)

http://www.slapstudio.com/testzone

Se ve perfectamente en IExplorer, pero FireFox me lo destroza.

<code>/* CSS Document */

html,body {
height: 100%;
background-color:#C4BCB0;
margin: 0px 0px 0px 0px;
}

#basico {
width: 500px;
margin: 0px auto 0px auto;
height: 100%;
background-color:#777777;
border-right: 2px solid #FFFFFF;
border-left: 2px solid #FFFFFF;
}

.content {
color:#777777;
font-size: 12px;
font-family:Verdana, Arial;
padding: 10px 15px 10px 15px;
margin: 0px 0px 0px 0px;
}

.menuright {
color:#9E83A7;
font-size: 12px;
font-family:Verdana, Arial;
padding: 15px 0px 0px 15px;
margin: 0px 0px 0px 0px;
}

h1 {
color:#990000;
font-size: 16px;
font-family:Verdana, Arial;
border-bottom: 2px dashed #FFFFFF;
padding: 10px 25px 10px 25px;
margin: 0px 0px 0px 0px;
background-color:#DDD3E0;
text-align:left;
}

h2, a {
color:#990000;
font-size: 10px;
font-family:Verdana, Arial;
border-top: 2px dashed #FFFFFF;
padding: 5px 5px 5px 5px;
margin: 0px 0px 0px 0px;
background-color:#DDD3E0;
text-align:right;
text-decoration:none;
}

#mainright {
width:142px;
height: 100%;
float:right;
background: #DDD3E0;
margin: 5px 2px 5px 2px;
border-left:4px solid #FFFFFF;
}

#mainleft {
width:342px;
height: 100%;
float:left;
background:#333333;
margin: 5px 2px 5px 2px;
padding: 0px;
border: 0px;
}</code>

Algun guru en la materia me puede dar una explicacion de este desastre? ;)

Por cierto, me imagino que al codigo le sobrar mucha mierda.... me gustaria algunas recomendaciones para ahorrar, optimizar y limpiar las css, seria posible?