Foros del Web » Creando para Internet » CSS »

Aporte: columnas equilibradas

Estas en el tema de Aporte: columnas equilibradas en el foro de CSS en Foros del Web. Esta es una de las cosas que más dudas y consultas suscita en el foro de CSS: cómo conseguir que teniendo dos o tres columnas, ...
  #1 (permalink)  
Antiguo 25/09/2008, 10:56
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
Aporte: columnas equilibradas

Esta es una de las cosas que más dudas y consultas suscita en el foro de CSS: cómo conseguir que teniendo dos o tres columnas, todas crezcan a la par cuando el contenido de una de ellas crece. Y es que no es complicado en absoluto, pero ahí está nuestro buen enemigo Internet Explorer 6, para entretenernos un poco y obligarnos a pensar (gracias, Bill).

Olvidándonos de IE6 la cosa sería todavía más sencilla porque todos los navegadores saben dimensionar cajas con posición absoluta en arreglo a las coordenadas top y bottom, o bien saben usar display table y display table-cell, por ejemplo, pero desgraciadamente el susodicho IE6 no sabe usar ningua de esas cosas, por lo que nos da al traste con el diseño si queremos que sea lo más compatible posible.

Existen infinidad de variantes en cuanto al asunto de conseguir que nuestras columnas queden equilibradas cuando una de ellas crece: la solución que presento se refiere sólo a dos columnas que queden separadas entre sí.

Cita:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="es-es">
<head>
<title>Columnas equilibradas</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
#caja_izq {width: 850px;
margin: 20px auto;
color:#fff;
background-color: #4c9ab1;
overflow: auto;
}
#caja_der {width: 500px;
float: right;
background-color: #82b04d;
border-left: solid 30px #fff;
}
.columna_izquierda {width: 280px;
float: left;
padding: 20px;
position: relative;
margin-left: -350px;
}
.columna_derecha {width: 450px;
float: left;
padding: 20px;
}
</style>
</head>
<body>
<div id="caja_izq">
<div id="caja_der">

<div class="columna_izquierda">Lorem ipsum...
</div>

<div class="columna_derecha">Lorem ipsum dolor...
</div>

</div>
</div>
</body>
</html>
Este código ha sido probado y funciona correctamente en los navegadores Firefox 2 y 3, Explorer 6 y 7, Opera 9.5, Safari 3.1 Windows, Firefox 2 y 3 Linux y Konkeror.

Si alguien desea leer una explicación más detallada del por qué de las cosas, puede bajarse libremente el archivo zip que he enlazado en las FAQ de CSS, que contiene el ejemplo con contenido y un artículo que explica todos los detalles del código.

He visto que mucha gente tiene una gran afición a llamar a las cosas "Solución definitiva", y cosas por estilo. Creo que esta es una buena solución, pero como todo, no funcionará absolutamente siempre, sino que habrá de adaptarse a cada caso concreto con mucho cuidado, e incluso puede que haya situaciones en las que no sirva de nada.

Un poco de paciencia e imaginación serán vuestros mejores aliados para conseguir este mismo efecto en casi cualquier situación que se presente.
__________________
Visita mi nueva web idplus.org
  #2 (permalink)  
Antiguo 25/09/2008, 13:07
Avatar de webosiris
Moderador egiptólogo
 
Fecha de Ingreso: febrero-2002
Ubicación: Luxor, Egipto
Mensajes: 10.727
Antigüedad: 15 años, 9 meses
Puntos: 997
Respuesta: Aporte: columnas equilibradas

es la primera vez que veo esta técnica
personalmente siempre he usado la técnica de las falsas columnas de ALA

PD: todo un detalle que la explicación del zip esté en .odt también!
__________________
Pasamos tus PSD a HTML

Pobre del que lo sabe todo, porque no tiene nada más que aprender ni razón para vivir. -
  #3 (permalink)  
Antiguo 25/09/2008, 13:13
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: Aporte: columnas equilibradas

Cita:
Iniciado por webosiris Ver Mensaje
es la primera vez que veo esta técnica
personalmente siempre he usado la técnica de las falsas columnas de ALA
Tenía varias cosas para poner, porque también uso la de los bordes que simulan columnas, etc. (aunque esa sí necesita de hacks para IE6), pero por no hacerlo demasiado extenso me decidí por poner una sóla de las técnicas para una única situación (dos columnas separadas). Igual iré añadiendo poco a poco como en el caso de los menús.

Cita:
Iniciado por webosiris Ver Mensaje
PD: todo un detalle que la explicación del zip esté en .odt también!
Gracias, me alegro de que te haya gustado. Hasta que los ponga en alguna parte en html, creo que de momento es obligatorio ponerlos también en .odt
__________________
Visita mi nueva web idplus.org
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

SíEste tema le ha gustado a 1 personas




La zona horaria es GMT -6. Ahora son las 04:28.