3 columnas en todos los navegadores

[xevisoyyo]

vamos a situarnos

tres columnas

html:

Código HTML:

<div id="cuerpo">
<div id="izquierda">....................</div>
<div id="derecha">.....................</div>
<div id="centro">.......................</div>
</div>
<div id="afiliados2">....................</div> 

las capas se me colocan bien formando tres columnas pero en Opera, Firefox (e imagino q en mas) pese a salir bien se solapan con afiliados2 q es la capa siguiente, eso lo solucione poniendo una altura determinada en el cuerpo (600px) pero la idea es que se adapte segun tenga contenido esa pagina, sino me vere obligado a hacer todas las paginas de la misma altura, os pongo un ejemplo, donde sobrepase los 600px en contenido, para q veais (si teneis mas de un navegador, ya q en ie se ve bien aunq sobrepase la altura), pensad q puse mas noticias para q se vea el error y que eso pasa tanto en izquierda como en derecha como en centro (en el ejemplo la ziquierda y el centro sobrepasan)

podeis ver la web aqui:www.tomamas.com

os dejo parte de la hoja de estilos para q veais q puse y me aconsejeis:

Código:

#cuerpo{
	background-color:#ffffff;
	margin:auto;
	width:750px;
	height:600px;
	text-align: center;}

#izquierda{
	width:120px;
	float:left;
	height:100%;
	font-family: "Comic Sans MS";
	font-size: 12px;
	line-height: 20px;
	color: #999999;
	text-align: left;
	margin:auto;
	padding-left: 4px;
	padding-right: 4px;}

#centro{
	float:left;
	width:500px;
	height:100%;}

#derecha{
	width:120px;
	float:right;
	height:100%;
	background-color: #99CCFF;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #666666;
	line-height: 25px;
	text-transform: uppercase;}

#afiliados2{
	margin:auto;
	background-color:#000000;
	height:90px;
	width:770px;}

gracias a todos de antemano

[kemie]

intenta darle un clear:both a afiliados2

[xevisoyyo]

lo he probado y nada.

bueno si nadie sabe como solucionar eso, a ve rsi alguien sabe como hacer 3 columnas que se vean bien en todos los navcvegadores y que sin poner una altura predeterminada no se superpongan con las siguientes capas.

me explico, una cabecera, un cuerpo y un pie de pagina, quiero un cuerpo con tres columnas y no poner una altura en concreto osea q varie segun el contenido de la mas larga de las columnas. una vez conseguido esto la idea es que no se monte encima del pie de pagina, el problema me lo dan todos menos explorer.


ver el fallo en: www.tomamas.com

[kemie]

esto creo que funciona (hace que #cuerpo englobe a los divs flotados dentro de el):
#cuerpo{
background-color:#ffffff;
margin:auto;
width:750px;
text-align: center;
overflow:auto;/* esto funciona para navegadores modernos*/
}
* html #cuerpo{
height:1%;/* esto funciona para internet explorer*/
}

[xevisoyyo]

muchas gracias Kemie, con el overflow:auto me basta, aaaay algo tan sencillo, jeje, gracias, en internet explorer ya se ve bien, bueno seguiremos con el tema a evr q mas cosas surgen jaja

PD: esto de que cada navegador (bueno explorer) interprete una cosa deberia ser delito


gracias kemie