Foros del Web - CAPA y tres letras

Bueno amigos, intentando aprender un poquito de CSS empece a maquetar una pagina... sucede que basicamente la estoy programando fiandome de dos navegadores: EXPLORER, MOZILLA FIRE FOX

Pues bien como ya sabran en el MOzilla se em ve bien.... pero en explorer como siempre no :P.

Veamos mi pagina:
http://www.safuka.com/asesor/index.php

ahora veamos el codigo:

INDEX.PHP

Código:

<html>

<head>

<title>Asesoria informática</title>

<link rel="STYLESHEET" type="text/css" href="includes/estilo.css">

</head>

<body>

<div id="contenedor"><div id="cabecera"><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="760" height="163">

            <param name="movie" value="media/presentacion.swf">

            <param name="quality" value="high">

            <embed src="presentacion.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="760" height="163"></embed>

          </object></div>
<div id="blanco_top"></div>
<div id="planes"><!--

sigue el plan uno

--><div id="planes_uno">

        uno

        </div><!--

        sigue el plan dos

        --><div id="planes_dos">

        dos

        </div><!--

        Plan tres

        --><div id="planes_tres">

        tres

        </div><!--

        planj cuatro

        --><div id="planes_cuatro">s</div></div></div>

</body>

</html>

ESTILO.CSS

Código:

BODY {

background-color:#CCCCCC;

font : 10px Verdana, Geneva, Arial, Helvetica, sans-serif;

color : #000;

margin : 20px 0px 20px 0px;

text-align: center;

}
 

#contenedor{

text-align: left;

width: 760px;

background-color : #ffffff;

margin: auto;

}
 

#cabecera{

height : 163px;

width: 100%;

} 
 

#blanco_top{

height : 15px;

}
 

#planes{

margin : 0px 0px 0px 0px;

width: 100%;

background-color:#FFFFFF;

height: 250px;

} 
 

#planes_uno{

padding:0px;

margin : 0px 0px 0px 0px;

width: 25%;

background-color:#000000;

height:100%;

float:left;

} 
 

#planes_dos{

padding:0px;

margin : 0px 0px 0px 0px;

width: 25%;

background-color:#FF0000;

height:100%;

float:left;

} 

#planes_tres{

padding:0px;

margin : 0px 0px 0px 0px;

width: 25%;

background-color:#FF0000;

height:100%;

float:left;

} 

#planes_cuatro{

padding:0px;

margin : 0px 0px 0px 0px;

width: 25%;

background-color:#FF0000;

height:100%;

float: left;

} 

#cuerpo{

margin : 0px 0px 0px 0px;

width: 100%;

background-color:#FF0000;

height:200px;

clear:both;

}

Mi problema es que en internet explorer el ultimo cuadro rojo se baja a la siguiente posicion...... y para que els parezca mas extraño cuando escribo en esa capa roja mas de 5 o 6 car4acteres el cuadro rojo se sube a donde deberia de estar pero quedan dos o tres caracteres abajo

este es un ejemplo como se ve con caractere adentro:

http://www.safuka.com/asesor/index2.php