Cómo hacer que una division con <DIV> se alargue a la misma altura que la de al lado?

Tigervlc · #1 (**permalink**) 19/10/2005, 11:45

En mi página web tengo varias secciones (cabecera, lateral izquierdo, cuerpo principal, lateral derecho, pie de página). Todas están identificadas con un DIV para aplicarles los CSS que les corresponden.

La sección del cuerpo principal, entre medias de los laterales, es la que aumenta o disminuye el alto de la página, dependiendo de los datos que visualiza.

El problema está en que los laterales se quedan a la misma altura siempre, y muchas veces se quedan cortos, sin llegar a tocar el pie de página, que se queda justo debajo del cuerpo principal. Cómo puedo hacer (estilo que he de usar) para que se alarguen los laterales a la misma distancia del cuero ppal. de forma que toquen también el pie de página?

Ambos laterales tienen que amoldarse a la distancia del área principal. Alguna ayuda por favor?

Rafael · #2 (**permalink**) 19/10/2005, 17:34

Hola

A ver si esto:

Código PHP:

  <body> 
<div style="height: 500px; background-color: #CCC;">Hola 
<div style="height: 100%; background-color: #FCC; float: left;">Flotante</div> 
</div> 
</body>

Tigervlc · #3 (**permalink**) 20/10/2005, 08:15

Hola, poniendo "height: 100%;" no me sale aunque también tenga el estilo float.

Alguna otra sugerencia, por favor?

RoQ · #4 (**permalink**) 20/10/2005, 09:05

lo que buscas es que se vea de esa manera ¿no?, para eso hay tecnicas como faux columns que lo que hacen es poner un background que se repita hacia abajo y de esa impresion
http://www.alistapart.com/articles/fauxcolumns/

Rafael · #5 (**permalink**) 20/10/2005, 09:49

Curioso... En Ie si funciona.

Lo del fondo parece que se limitaría a un diseño de ancho fijo.

Tal vez se pueda hacer un JavaScript para calcular el alto dinámicamente.

Tigervlc · #6 (**permalink**) 20/10/2005, 18:03

Bueno, la verdad es que las columnas las tengo con anchos relativos.

Le dí un ancho a body de 800px, y a las 3 columnas DIV, les dí 20%, 60%, 20% respectivamente.

Que por cierto, otro inconveniente que tuve, a ver si sabeis la razón: el porcentaje de la del medio lo tuve que cambiar de 60% a 58.5% porque con 60% inexplicablemente la columna derecha aparecía debajo de las otras, como si no cupiera al lado de las otras en los 800px asignados al ancho de body. Y las tres columnas la tengo respectivamente con el estilo float a left, left, y right. Hay algún error para que no se pueda poner la columna central al 60%??

En cuanto a lo de si usar anchos absolutos, pues creo que voy a hacerlo, porque haciendo lo del fondo en mosaico se me descuadra si uso anchos relativos. No hay más formas de arreglar esto?

En javascript cómo se podría hacer?

Tigervlc · #7 (**permalink**) 20/10/2005, 18:14

Tal y como digo arriba, he probado con anchos absolutos:
body tiene 800px
y las 3 columnas: 175, 450, 175 respect. (suman 800)
y me vuelve a pasar ese error de que la columna derecha se me desplaza por debajo de las otras. No lo entiendo. :(

Rafael · #8 (**permalink**) 20/10/2005, 19:10

A veces Ie no toma en cuenta el espacio que ocupa su scrollbar.

Tambié revisa si no tienes un margin, border o padding que se sume al ancho.

Si alguna imagen es un poco más ancha también con un border te empujará la columna

Tal vez a la del centro dejala sin ancho fijo.

axiertxo · #9 (**permalink**) 21/10/2005, 01:25

Cita:

Iniciado por Tigervlc

En javascript cómo se podría hacer?

Seria tan facil como darle un nombre a la capa contendedora del menu y otro al contenido y en un <body onload="funcioncambikotamano()"> decirle:

<script>
funcioncambikotamano(){
Nombrecapamenu.height=Nombrecontenidomenu.height;
}
</script>

Lo en puesto cuando cargue la pagina, pero puede ser en cualquier momento, cuando hagas click en el menu....

SALUDOS

Tigervlc · #10 (**permalink**) 21/10/2005, 03:26

Gracias de nuevo. Intentaré lo de javascript.

Auque no veo claro lo de calcular la altura del contenido variable.

Rafael, pues la verdad que no sé dónde está el fallo en ese tema. De todas formas el padding creo que no se añade como espacio extra, sino que toma espacio del asignado al bloque para dejarlo en blanco (o sea que si pones padding, el contenido se comprime, como en las tablas). O al menos eso creo no? Si me equivoco dímelo.

Con border lo que hice fue añadir bordes de 1px a los lados, per no sé si el borde también toma espacio extra, o del propio espacio asignado al bloque.

El margen creo que sí que toma espacio extra, pero hice esto con BODY:

Código:

body{
	width:800px;
	margin-left: 0px;
	margin-top: 0px;
	margin-bottom:0px;
             background-color: #000000;
}

Rafael · #11 (**permalink**) 21/10/2005, 19:18

A ver si puedes poner el código completo para revisar. En realidad es cosa de hacer una copia e ir quitando pedacería

para ver quién fue.

FuLaNo_ · #12 (**permalink**) 23/10/2005, 04:25

Si encuentran un remedio alternativo a javascript avisen...

Yo no he encontrado otra forma... los DIVS no manejan bien el tema del height (en ningun navegador, no le hechen la culpa a IE)...

Lo bueno es que con javascript puedes darle los pixeles exactos para que se vea perfecto en cada navegador...

programeitor · #13 (**permalink**) 23/10/2005, 10:08

.

Mira que facil:

<!DOCTYPE HTML PUBLIC>
<html><head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<title>
columnas de la misma altura
</title><style>
html{overflow-x:hidden;}
body{overflow-y:hidden;margin:0px auto;width:100%;background:black;}
#todo{border-collapse:collapse;width:100%;}
#izq,#der{border:1px solid black;vertical-align:top;padding:5px;text-align:justify;}
#izq{width:20%;background:gray;}
#der{background:silver;}
</style></head><body>
<table id="todo">
<tr>
<td id="izq">
izquierda
</td>
<td id="der">
derecha<br>
derecha
</td>
</tr>
</table>
</body></html>

.

Tigervlc · #14 (**permalink**) 23/10/2005, 13:01

Gracias programeitor!

De todas formas tu lo haces usando tablas, y así claro, todas las columnas te van a salir de la misma altura. Es mediante etiquetas DIV (con capas) como nos interesaba averiguarlo.

Pero aprovechando, me gustaría saber el significado de estas propiedades que has puesto y no conocía:

overflow-x:hidden;
overflow-y:hidden;
border-collapse:collapse;

programeitor · #15 (**permalink**) 23/10/2005, 16:35

Estas cosas son:

overflow-x:hidden; impide la aparicion de la barra de desplazamiento horizontal.
overflow-y:hidden; idem con la vertical.
overflow-Z:hidden; aun no ha salido.
border-collapse:collapse; elimina la separacion entre bordes en las tablas.

Si has probado el ejemplo ,puedes ver el resultado.

Hacerlo con divs

,cuando se puede hacer facilmente con tablas.

Tigervlc · #16 (**permalink**) 25/10/2005, 07:40

Bueno, yo utilizaba capas porque tengo entendido que las tablas están en desuso frente a las capas, ya que las tablas tienen una estructura más rígida y has de escribir el contenido justo donde tiene que aparecer, mientras que las capas puedes escribirlas donde te dé la gana en el documento, que con CSS ya las vas situando, aparte de que el documento se te queda limpio de tantos TR's y TD's anidados, lo que facilita la legibilidad.

Bueno, esa es mi opinión.

axiertxo · #17 (**permalink**) 25/10/2005, 08:10

Tigervlc, tienes toda la razon, en realidad las capas se hicieron con el fin de separar contenido. Las tablas se deberían de utilizar solo cuando es una tabla de en el sentido mas amplio: tabla de elementos, tabla de empleados...
Lo que pasa es que hay gente que aun no se ha acostumbrado del todo o le cuesta maquetar con capas, yo a veces según la situación también uso alguna que otra tabla, aunque procuro maquetar con capas.

Saludos

FuLaNo_ · #18 (**permalink**) 25/10/2005, 08:21

Como dice axiertxo, las tablas se usan para contenido tubulado, en cambio los divs para, como su acronimo lo indica, dividir secciones.

Pero ojo, tendrás la misma cantidad de DIV's que de <td>... por lo que la "limpiesa" del codigo no es tal... a lo sumo te ahorras los <tr> y <table>, aunque mayormente hay que usar varios divs para lograr lo que se logra con un <tr><td>, por lo que en numeros sería lo mismo...

Yo aún uso tablas para muchas cosas que no deberia, el tema es que los divs aún no son tratados correctamente por todos los navegadores (o me pasa a mi...).

Por cierto, border-collapse:collapse; no elimina la separacio entre los bordes, para ello esta spacing (spacing:none;) que, en conjunto con border-collapse, trabaja de forma similar a las etiquetas cellpadding y cellspacing de HTML.

programeitor · #19 (**permalink**) 25/10/2005, 14:56

fulano ¿ si no elimina la separacion entre bordes, que es lo que hace concretamente ?

Cita:

Iniciado por tigervlc

Bueno, yo utilizaba capas porque tengo entendido que las tablas están en desuso frente a las capas..........las tablas tienen una estructura más rígida y has de escribir el contenido justo donde tiene que aparecer.......

Se puede comprender que se cambie un "sistema" por otro cuando es un sistema mejor., no cuando es peor, sea el nº de personas que sea, que se trasladen a dicho sistema, muchas de ellas, solo. ,porque esta de moda o algo por el estilo.

¿ Donde vas a escribir el contenido sino, ¿¿ donde no tiene que aparecer..... ??

Las tablas son rigidas de base, lo cual no es una caracteristica que tengan los <div> <span> y demas, que hay que posicionarlos, ademas a los componentes de la tabla, se le pueden dar todas las funciones que le puedas aplicar a una capa, y por supuesto(aunque a algunos ni se les ocurra).. ,son tan CeSeSeables como cualquiera, con lo que ya, salen ganando las tablas.

Es preferible tablas anidadas a divs anidados. En las tablas el exterior y los elementos interiores estan ya definidos y preconfigurados, en el div no.

<table>
<tr>
<td>
</td>
</tr>
</table>

<div>
<div>
<div>
</div>
</div>
</div>

algunos diran que esto es un caso extremo ,pero yo estoy harto de verlo , yo mismo lo he hecho alguna vez, de hecho, lo estoy haciendo en este momento y estoy pensado en reconfigurarlo... ,pues llega un punto en que es tal el anidado de divs, que es mejor usar tablas. Evidentemente es mas legible una tabla que varios divs ,claro. ,que tambien hay que saber leerla.

Un saludo a todos.

baccxus · #20 (**permalink**) 25/10/2005, 15:36

Cita:

Iniciado por programeitor

pues llega un punto en que es tal el anidado de divs, que es mejor usar tablas. Evidentemente es mas legible una tabla que varios divs ,claro. ,que tambien hay que saber leerla

Lo que pasa es que el uso de CSS implica dejar de pensar que estás trabajando con una tabla, y así se evitar el mal uso (anidamiento), te puedo asegurar que una estructura bien hecha con CSS es 100% mejor que un diseño con tablas.

Saludos

programeitor · #21 (**permalink**) 25/10/2005, 17:14

Cita:

Iniciado por baccxus

Lo que pasa es que el uso de CSS implica dejar de pensar que estás trabajando con una tabla

El css es para aplicar estilos a un documento, y ningun elemento queda excluido.
No se donde habras oido tal cosa......

baccxus · #22 (**permalink**) 25/10/2005, 17:37

No solo darle "estilos" a un documento, sino a darle SENTIDO SEMANTICO, y usar las cosas para lo que fueron pensadas, de hecho, Kemie (www.disenorama.com) tiene varios artículos acerca de lo que hablo, además lo que puse acerca de "dejar de pensar en que estás trabajando con una tabla" es por algo personal, al cambiarme a CSS fue duro, pero fue lo mejor!c

.

Saludos

PD: los artículos de diseñorama, este http://www.disenorama.com/articulos/...co_el_medi.htm y este http://www.disenorama.com/tutoriales...con_codigo.htm

Tigervlc · #23 (**permalink**) 25/10/2005, 18:09

Bueno, yo creo que la buena programación está en el camino de separar el contenido de la presentación. Usando capas se adelanta un escalón en este proceso, comparado con el uso de tablas, ya que con las tablas aún se obliga a tener el contenido sin separarlo de la estructura. Además con las tablas implementas un diseño tabular, mientras que con las capas puedes hacer un diseño jerárquico, en árbol.

El ejemplo máximo de esta forma de programar es XML. Pero bueno, cada uno es libre de usar el método que quiera.

Yo concretamente estoy usando ahora capas para los bloques principales (lo que antes se hacía con frames) y otros sub-bloques, pero para sub-bloques pequeños dentro de los principales sigo usando tablas.

De todas formas en el futuro yo creo que se va a potenciar más aún el diseño jerárquico y a abandonar el diseño tabular (excepto para tablas cartesianas, o sea, las originales).

FuLaNo_ · #24 (**permalink**) 26/10/2005, 06:24

programeitor mirá http://www.ignside.net/man/css/tablas.php

Allí verás que border-collapse es simplemente una forma de mostrar los bordes de la tabla y celda, pero si no especificas el "spacing" igualmente quedara un "margen" entre celda y celda (ojo, es mi opinion, no se si tengo razón, solo hablo por las pruebas que hice y, en ningún caso, utilizando solo "border-collapse:collapse" se eliminaron los márgenes)...

Aunque esto en algunos navegadores es X y en otros es Y... es decir, cada uno lo interpreta como tiene ganas...

En fin, creo que el tema esta muy bien explicado hache arriba... hay que darle semántica al asunto, el tema sería intentar programar teniendo en cuenta de que si alguien mira el código HTML pueda "navegar" tranquilamente la pagina, es decir, que entienda cada sección del código, esto también nos ayudará -bastante- con los navegadores, ya que los spiders (arañas) leen el código y, mienta mas semántica, mejor describirán y descifraran el contenido de nuestro sitio.

baccxus · #25 (**permalink**) 26/10/2005, 06:59

Cita:

Iniciado por FuLaNo_

Allí verás que border-collapse es simplemente una forma de mostrar los bordes de la tabla y celda, pero si no especificas el "spacing" igualmente quedara un "margen" entre celda y celda (ojo, es mi opinion, no se si tengo razón, solo hablo por las pruebas que hice y, en ningún caso, utilizando solo "border-collapse:collapse" se eliminaron los márgenes)...

"border-collapse:collapse" no me deja espaciado y no tuve necesidad de usar "spacing:", habria que vel el tipo de DTD que usas o también saber a que le aplicas el "border-collapse", por lo general lo aplico así y me funciona:

Código:

table, tr, td {border-collapse:collapse}

Saludos,

axiertxo · #26 (**permalink**) 26/10/2005, 07:10

Cita:

Iniciado por programeitor

ademas a los componentes de la tabla, se le pueden dar todas las funciones que le puedas aplicar a una capa, y por supuesto(aunque a algunos ni se les ocurra).. ,son tan CeSeSeables como cualquiera, con lo que ya, salen ganando las tablas.

Hciendo referencia a lo que dice programeitor, No se puede comprar ni por asombro la versatilidad que tienen las capas con las tablas.

Un gran ejemplo de esto es http://www.csszengarden.com/tr/espanol/
que utiliza un codigo html y cambiando el css cambia toda la pagina ddividiendo forma con contenido.

Abrir el Dreamweaver y hacer un layout por tablas es lo más sencillo, a largo plazo se convierte en un problema cuando quieras actualizar el sitio.

Las tablas existían en HTML por una sola razón: para mostrar datos tabulares. Pero luego border="0" hizo posible que los diseñadores pudieran obtener una rejilla para diseñar texto e imágenes. Puesto que es aún uno de los métodos más dominantes para diseñar visualmente sitios web de alta complejidad, el uso de tablas está, de hecho, interfiriendo con la creación de un sitio web mejor, más accesible, flexible y funcional.

los datos de presentación se mezclan con tu contenido.
Esto hace que los archivos de tus páginas sean innecesariamente pesados, ya que los usuarios deben bajar estos datos de presentación por cada página que visitan.
Banda ancha no es gratuita.

Esto hace que los rediseños de los sitios y contenido existentes requieran mucha mano de obra (y sean muy costosos).

Además, hace que la consistencia visual de todo un sitio sea extremadamente difícil de alcanzar (y muy costosa).

Las páginas basadas en tablas son también mucho menos accesibles para los usuarios que padecen incapacidades y para las personas que utilizan teléfonos celulares y PDA para acceder a la Web.

Saludos

programeitor · #27 (**permalink**) 26/10/2005, 11:36

.

Podrias explicarme, que significa esto:

Cita:

Iniciado por axiertxo

No se puede comprar ni por asombro

no logro entenderlo.

los datos de estilo los carga aparte el que quiere, no creo que tenga ninguna relacion entre usar tablas o capas.

Cita:

Iniciado por axiertxo

los datos de presentación se mezclan con tu contenido.

por otra parte, las tablas nesesitan menos datos "auxiliares" para sus dimensiones y posicionamiento, al ser una extructura con divisiones escalabes y ajustables.

¿ En que sentido es mas versatil y funcional ?
¿ flexible!! ? ¿ cuanto puedes doblar una pagina web hecha con capas ?
¿ mejor ?

La utilizacion de capas para aparentar tablas requiere mucha mano de obra y es muy costosa, incluso penosa.

Cita:

Iniciado por axiertxo

Las páginas basadas en tablas son también mucho menos accesibles para los usuarios que padecen incapacidades y para las personas que utilizan teléfonos celulares y PDA para acceder a la Web.

tu mismo lo has dicho:

Cita:

Iniciado por axiertxio

Puesto que es aún uno de los métodos más dominantes para diseñar visualmente sitios web de alta complejidad

Cual es la verdadera razon(de ser cierto), de no implementar las tablas para este tipo de usuarios y dispositivos. Es algo que no tiene explicacion posible, pues hace inaccesible la gran parte de la red a estas personas y/o sus dispositivos. Es una verdadera incongruencia.

Saludos.

.

RoQ · #28 (**permalink**) 26/10/2005, 11:49

no uses divs para simular tablas, los divs son para dividir, y les puedes dar ancho, alto y posicion, en base a eso estructura tu pagina, si sabiendo eso igual quieres usar tablas porque te parece mas facil, entonces usalas, nadie te dice que no lo hagas, pero creo que la gente que pregunta en este foro ya no quiere usarlas y por eso pregunta como hacerlo con divs, todos aca sabemos usar una tabla para maquetar puesto que todos lo hemos hecho, asi que una solucion con tablas es recontra obvia.
La idea que tienes que asimilar es el uso del lenguaje, el HTML solo estructura la hoja y tiene etiquetas para eso, las tablas son para mostrar datos tabulados, no necesitas usar divs para simular tablas puesto que para eso hay tablas, usar tablas para hacer columnas o listas o divisiones es como usar la etiqueta <h1> cada vez que quiera usar una fuente grande y en negrita.

Tigervlc · #29 (**permalink**) 26/10/2005, 14:27

Con divs puedes poner las divisiones donde te plazca de forma que te ayude en la legibilidad, con tablas no. Eso es lo que significa flexibilidad y es a lo que se referiría axiertxo, no es nada de si se puede doblar la página más o menos.

baccxus · #30 (**permalink**) 26/10/2005, 15:44

No solo es cuestión de divisiones y estructura de visión, ya lo decía anteriormente "SEMÁNTICA"; también gracias al ORDEN de tu página, las respuestas de los búscadores es más limpia, por ejemplo, si buscas un tema específico (digamos "Teoría del vuelo migratorio en Isla Galápagos"), el cual tienes alojado en tu página, pones en el búscador (el búscador que sea, inclusive uno propio creado por tí), tu búscador va a buscar lo que más se asemeja a la orden que le pusiste, y seguro dará mejores resultados en un diseño CSS SEMÁNTICO, que en otro diseño que no lo use; por qué?, simplemente porque para los buscadores no es lo mismo:

Código:

<H1>El Hijo de Pepito</h1>

que

Código:

<font face="Arial" color"#000000" size="16">El Hijo de Pepito</font>

Aunque tu lo veas igual!

Saludos,

PD: Esto hoy en día no aplica. Cualquier sitio web de "Alta Complejidad" se debe/puede hacer con CSS

Cita:

Iniciado por axiertxo

Puesto que es aún uno de los métodos más dominantes para diseñar visualmente sitios web de alta complejidad