Foros del Web » Creando para Internet » CSS »

Columnas con 100% de alto

Estas en el tema de Columnas con 100% de alto en el foro de CSS en Foros del Web. Hola, después de ver tanta info en internet y consejos, todavía no pude resolver un problema, y aquí lo posteo. Mi codigo es el siguiente: ...
  #1 (permalink)  
Antiguo 30/06/2008, 16:01
 
Fecha de Ingreso: febrero-2008
Mensajes: 578
Antigüedad: 9 años, 9 meses
Puntos: 3
Columnas con 100% de alto

Hola, después de ver tanta info en internet y consejos, todavía no pude resolver un problema, y aquí lo posteo.

Mi codigo es el siguiente:

Código HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
div.central {width:600px;}
div.izquierda {width:160px;float:left;background:#FF0000;}
div.centro {float:left;background:#E5E5E5;}
div.derecha {width:145px;float:right;background:#00FFFF;}
</style>
</head>
<body>
<div class="central">
  <div class="izquierda">
    IZQUIERDA<br>
    IZQUIERDA<br>
    IZQUIERDA<br>
  </div>
  <div class="centro">
    CENTRO<br>
    CENTRO<br>
    CENTRO<br>
    CENTRO<br>
    CENTRO<br>
    CENTRO<br>
    CENTRO<br>
    CENTRO<br>
  </div>
  <div class="derecha">
    DERECHA<br>
    DERECHA<br>
    DERECHA<br>
    DERECHA<br>
  </div>
</div>
</body>
</html> 
lo único que quiero es que agregue datos, ya sea en cualquiera de las 3 columnas, quiero que las restantes tengan de alto lo mismo, así de esta forma se exapnde el color hacia abajo... me explico ?

Ya sé que es un tema muy repetido y tratado, pero ninguna de las soluciones que encontré en internet son 100% efectivas.

Saludos y mil gracias por la ayuda.
  #2 (permalink)  
Antiguo 30/06/2008, 16:39
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Columnas con 100% de alto

Un bonito truco para una solución que funciona en todos los navegadores que he probado (IE6 y 7, FF2 y 3, Opera 9.50 y Safari Win 3.1, Konkeror).

Cita:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
div.central {width:295px;border-left: solid 160px #f00;border-right: solid 145px #0ff;background:#E5E5E5;position: relative;}
div.izquierda {width:160px;float:left;margin-left: -160px;position: relative;}
div.centro {float:left;}
div.derecha {width:145px;float:right;margin-right:-145px;position: relative;}
.corte {clear: both;}
</style>
<!--[if IE]><style>div.central {width: 600px;}</style><![endif]-->
</head>
<body>
<div class="central">
<div class="izquierda">
IZQUIERDA<br>
IZQUIERDA<br>
IZQUIERDA<br>
</div>
<div class="centro">
CENTRO<br>
CENTRO<br>
CENTRO<br>
CENTRO<br>
CENTRO<br>
CENTRO<br>
CENTRO<br>
CENTRO<br>
</div>
<div class="derecha">
DERECHA<br>
DERECHA<br>
DERECHA<br>
DERECHA<br>
</div>
<div class="corte"></div>
</div>
</body>
</html>
Mikel.
  #3 (permalink)  
Antiguo 30/06/2008, 21:23
 
Fecha de Ingreso: febrero-2008
Mensajes: 578
Antigüedad: 9 años, 9 meses
Puntos: 3
Respuesta: Columnas con 100% de alto

Gracias Mike, como siempre muy amable.

Te comento lo siguiente:

1) que tratas de hacer poniendo el div .corte {clear: both;} ??

2) Esta línea:
Cita:
<!--[if IE]><style>div.central {width: 600px;}</style><![endif]-->
la puedo reemplazar por:
*div.central {width: 600px;}
ya que el * lo acepte el IE, no ?

3) Es necesario el position:relative ??

Bueno, muchas gracias Mike como siempre.
Saludos
  #4 (permalink)  
Antiguo 01/07/2008, 01:17
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Columnas con 100% de alto

Cita:
Iniciado por Jamati Ver Mensaje
1) que tratas de hacer poniendo el div .corte {clear: both;} ??
No "trato" de hacer nada.
"Hago" que la caja contenedora crezca para albergar a las otras, ya que si no, al estar estas flotadas la contenedora no crecería (en todos menos IE).

Cita:
Iniciado por Jamati Ver Mensaje
2) Esta línea:

la puedo reemplazar por:
*div.central {width: 600px;}
ya que el * lo acepte el IE, no ?
No te lo recomiendo. La línea que he puesto con el comentario condicional es para que valide perfectamente tanto xhtml como css. Si la cambias por algún tipo de hack puede que no valide.

Cita:
Iniciado por Jamati Ver Mensaje
3) Es necesario el position:relative ??
Sí, es necesario para explorer; quítalo y verás lo que pasa.

Mikel.
  #5 (permalink)  
Antiguo 01/07/2008, 07:02
Avatar de AleSanchez
Colaborador
 
Fecha de Ingreso: septiembre-2004
Ubicación: Buenos Aires, Argentina
Mensajes: 3.692
Antigüedad: 13 años, 3 meses
Puntos: 47
Respuesta: Columnas con 100% de alto

Hace dos horas que estoy con este problema (novato en CSS) y tenia la solución aca nomás, en mi foro favorito...

Saludos!!!
__________________
¡Volviendo a la programación!
  #6 (permalink)  
Antiguo 01/07/2008, 08:52
 
Fecha de Ingreso: febrero-2008
Mensajes: 578
Antigüedad: 9 años, 9 meses
Puntos: 3
Respuesta: Columnas con 100% de alto

Gracias Mike.

Entendí muy bien tus explicaciones, y por lo visto has ayudado a otro forista más. Me surgen dos ultimas preguntas:

1) Con respecto a la línea:
Cita:
<!--[if IE]><style>div.central {width: 600px;}</style><![endif]-->
yo te decía de poner un *div.central {width: 600px;} porque en mi sitio tengo un archivo css, y ahí estoy poniendo todas las clases. Pasa que para simplificar mi problema puse todo junto. Entonces, para no tener que tocar absolutamente todas las páginas de mi sitio para agregar entre el HEAD esta línea, no se puede resolver de otra forma ?

2) Utilizo el Dreamweaver MX. Yo antes utilizaba las tablas, de a poco voy adaptando a CSS. Pero me resulta muy problematico abrir una página para modificar algo con el Dreamweaver, ya que todo tipo de CSS se desconfigura terriblemente, impidiendo trabajar normalmente. Mi pregunta es si existe algun tipo de programa que al abrir un HTML que tenga clases conserve y tome bien todas sus clases, y no te las ubique todas mal... me entiendo ?

Saludos y muchísimas gracias.
  #7 (permalink)  
Antiguo 01/07/2008, 10:02
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Columnas con 100% de alto

Si ya has ido poco a poco entendiendo cada vez mejor el código, yo te recomiendo que empieces a usar un editor de texto normal y corriente (como Wordpad, por ejemplo), para editar tus archivos html. Eso te evitará todo tipo de complicaciones.

En tu css podrías añadirlo así:

* html div.central{width: 600px;}

que creo que no te dará problemas.

Mikel.
  #8 (permalink)  
Antiguo 01/07/2008, 10:39
 
Fecha de Ingreso: febrero-2008
Mensajes: 578
Antigüedad: 9 años, 9 meses
Puntos: 3
Respuesta: Columnas con 100% de alto

Como siempre muy clarito.
Muchas gracias Mike.
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 14:59.