Foros del Web » Creando para Internet » CSS »

3 columnas en todos los navegadores

Estas en el tema de 3 columnas en todos los navegadores en el foro de CSS en Foros del Web. vamos a situarnos tres columnas html: Código HTML: <div id= "cuerpo" > <div id= "izquierda" > .................... </div> <div id= "derecha" > ..................... </div> <div ...
  #1 (permalink)  
Antiguo 06/11/2005, 13:52
Avatar de xevisoyyo  
Fecha de Ingreso: mayo-2005
Mensajes: 166
Antigüedad: 12 años, 6 meses
Puntos: 1
3 columnas en todos los navegadores

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

Última edición por xevisoyyo; 06/11/2005 a las 15:41
  #2 (permalink)  
Antiguo 07/11/2005, 08:35
Avatar de kemie  
Fecha de Ingreso: junio-2003
Ubicación: estocolmo<-->mexico
Mensajes: 1.627
Antigüedad: 14 años, 5 meses
Puntos: 1
intenta darle un clear:both a afiliados2
__________________
::::::::::::::::::::::::::::: WebHostNinja | diseñorama.com::::::::::::::::::::::::::::::
  #3 (permalink)  
Antiguo 07/11/2005, 15:47
Avatar de xevisoyyo  
Fecha de Ingreso: mayo-2005
Mensajes: 166
Antigüedad: 12 años, 6 meses
Puntos: 1
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
  #4 (permalink)  
Antiguo 08/11/2005, 07:16
Avatar de kemie  
Fecha de Ingreso: junio-2003
Ubicación: estocolmo<-->mexico
Mensajes: 1.627
Antigüedad: 14 años, 5 meses
Puntos: 1
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*/
}
__________________
::::::::::::::::::::::::::::: WebHostNinja | diseñorama.com::::::::::::::::::::::::::::::
  #5 (permalink)  
Antiguo 08/11/2005, 15:59
Avatar de xevisoyyo  
Fecha de Ingreso: mayo-2005
Mensajes: 166
Antigüedad: 12 años, 6 meses
Puntos: 1
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
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 08:20.