Foros del Web » Creando para Internet » CSS »

Misma altura a diferentes divs

Estas en el tema de Misma altura a diferentes divs en el foro de CSS en Foros del Web. Tengo un amigo que esta trabajando con ccs y se le planteo una duda, la cual me esta matando a mi también. La única manera ...
  #1 (permalink)  
Antiguo 05/01/2007, 13:21
Avatar de nicolaspar  
Fecha de Ingreso: noviembre-2004
Ubicación: Villa Ballester Bs-As|Ar
Mensajes: 2.002
Antigüedad: 13 años
Puntos: 34
Misma altura a diferentes divs

Tengo un amigo que esta trabajando con ccs y se le planteo una duda, la cual me esta matando a mi también. La única manera de solucionarla que se me ocurre es por javascript cambiando los height, pero seguro debe haber una manera mas eficiente, la consulta es la siguiente:

----------------------------
Tengo la página armada toda con CSS en lugar de tablas... es decir, con varios "div" posicionados en distintos lugares para formar una especie de tabla, pero sin usar las tablas en sí...
Tengo tres divs:
navigation | content | border

Cada uno tiene contenido dinámico, es decir, no sé a priori el alto de cada uno... una vez que se genera el contenido, pongámosle que "content" es el que queda más alto... si yo a los tres les pongo "height: auto", cada uno va a tener su propio alto de acuerdo a su propio contenido... yo necesito que los tres tengan el mismo alto, el de "content" (porque, en este caso, es el más alto)... ¿Cómo hago esto?

--------------------------------------

Espero puedan darme una mano...gracias!
__________________
Mi punto de partida es Que Bueno Lo Nuevo
  #2 (permalink)  
Antiguo 05/01/2007, 13:31
Avatar de nicolaspar  
Fecha de Ingreso: noviembre-2004
Ubicación: Villa Ballester Bs-As|Ar
Mensajes: 2.002
Antigüedad: 13 años
Puntos: 34
Re: Misma altura a diferentes divs

Se me ocurrio una.
Suponiendo que tengo dos divs, nav y content. Content se va a 500px, mientras que nav queda en 100px de altura.
Ahora, esto no molestaría si ambos están dentro de un div contenedor con una imagen de fondo que marque la navegación y se repita en Y...
Obviamente el div de la navegación no tendría fondo y esto haría parecer que este div se alarga junto con el otro...es la manera o hay otra mejor solución¡?
__________________
Mi punto de partida es Que Bueno Lo Nuevo
  #3 (permalink)  
Antiguo 05/01/2007, 13:39
Avatar de haron  
Fecha de Ingreso: febrero-2004
Ubicación: Cádiz (refinitivo)
Mensajes: 632
Antigüedad: 13 años, 9 meses
Puntos: 3
Re: Misma altura a diferentes divs

creo que esa es la solucion mas comun que se le da a este tipo de problemas.

la verdad, yo utilizo css siempre que puedo, pero a veces una tablita te puede salvar el culo... tampoco hay que ser tan purista.
  #4 (permalink)  
Antiguo 05/01/2007, 13:53
Avatar de DragonX
Colaborador
 
Fecha de Ingreso: mayo-2002
Ubicación: Funkyland
Mensajes: 8.339
Antigüedad: 15 años, 6 meses
Puntos: 153
Re: Misma altura a diferentes divs

y que pasa si a los div's les pones height: 100%
  #5 (permalink)  
Antiguo 05/01/2007, 13:54
Avatar de nicolaspar  
Fecha de Ingreso: noviembre-2004
Ubicación: Villa Ballester Bs-As|Ar
Mensajes: 2.002
Antigüedad: 13 años
Puntos: 34
Re: Misma altura a diferentes divs

Uso tablas a full, por eso no se bien como resolverlo. Gráficamente es válida la opción que doy, pero tal vez hay alguna mas potable.

Y Gracias! :)
__________________
Mi punto de partida es Que Bueno Lo Nuevo
  #6 (permalink)  
Antiguo 05/01/2007, 13:59
Avatar de nicolaspar  
Fecha de Ingreso: noviembre-2004
Ubicación: Villa Ballester Bs-As|Ar
Mensajes: 2.002
Antigüedad: 13 años
Puntos: 34
Re: Misma altura a diferentes divs

Cita:
Iniciado por DragonX Ver Mensaje
y que pasa si a los div's les pones height: 100%
No aplica por lo que se.
__________________
Mi punto de partida es Que Bueno Lo Nuevo
  #7 (permalink)  
Antiguo 05/01/2007, 14:00
Avatar de bhagat  
Fecha de Ingreso: julio-2002
Ubicación: Granada
Mensajes: 469
Antigüedad: 15 años, 4 meses
Puntos: 7
Re: Misma altura a diferentes divs

Asignales a los tres DIV un height fijo (no auto) y luego si le pones overllow:auto

aparecerá un scroll en el div donde el contenido ocupe mas que el espacio asignado, pero el div seguirá teniendo la misma altura.

__________________
Por prudencia, la palabra SIEMPRE,
no la deberiamos usar NUNCA

Bhagat Dominguez
www.percusioncreativa.com
  #8 (permalink)  
Antiguo 05/01/2007, 14:22
Avatar de nicolaspar  
Fecha de Ingreso: noviembre-2004
Ubicación: Villa Ballester Bs-As|Ar
Mensajes: 2.002
Antigüedad: 13 años
Puntos: 34
Re: Misma altura a diferentes divs

Eso sería estéticamente desagradable (sin ofender)....la idea es que las calles acompañen al contenido.
Ya lo ha solucionado con esta manera, de todas formas si saben de algo mejor se agradece ya que esta bueno conocer opciones.
__________________
Mi punto de partida es Que Bueno Lo Nuevo
  #9 (permalink)  
Antiguo 05/01/2007, 16:15
 
Fecha de Ingreso: noviembre-2003
Mensajes: 798
Antigüedad: 14 años
Puntos: 8
Re: Misma altura a diferentes divs

es sencillo:

Código PHP:
<!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">
<
head>
<
meta http-equiv="content-type" content="text/html; charset=utf-8" />
<
title>Example In search of the One True Layout Equal Height Columns</title>
<
style type="text/css">
/* <![CDATA[ */
#block_1
    
{
    
floatleft;
    
width34%;
    
margin-left33%;
    }
html #block_1
    
{
    
displayinline;
    }
#block_2
    
{
    
floatleft;
    
width33%;
    
margin-left: -67%;
    }
#block_3
    
{
    
floatleft;
    
width33%;
    }
/* Start Mac IE5 filter \*/
#block_1, #block_2, #block_3
    
{
    
padding-bottom32767px !important;
    
margin-bottom: -32767px !important
    }
/* End Mac IE5 filter */
#wrapper
    
{
    
overflowhidden/* This hides the excess padding in non-IE browsers */
    
}
/* we need this for IE 5.01 - otherwise the wrapper does not expand to the
necessary height (unless fixed, this problem becomes even more acute 
weirdness as the method is enhanced */
#wrapper
    
{
/* Normally a Holly-style hack height: 1% would suffice but that causes 
IE 5.01 to completely collapse the wrapper - instead we float it */
    
floatleft;
/* NB. possibly only IE 5.01 needs to get this float value - otherwise 5.5 sometimes 
(I saw it happen many moons ago) makes the width of wrapper too small 
the float: none with the comment is ignored by 5.01,
5.5 and above see it and carry on about their business
It's probably fine to just remove it, but it's left here 
just in case that many moons ago problem rears its head again */
    
float/**/none;
    }
/* easy clearing */
#wrapper:after
    
{
    
content'[DO NOT LEAVE IT IS NOT REAL]'
    
displayblock
    
height0
    
clearboth
    
visibilityhidden;
    }
#wrapper
    
{
    
displayinline-block;
    }
/*\*/
#wrapper
    
{
    
displayblock;
    }
/* end easy clearing */
#footer
    
{
    
clearboth;
    }
/* Safari needs this - otherwise the ghost overflow, though painted 
correctly obscures links and form elements that by rights should be above it.
An unintended side-effect is that it cause such elements to vanish in IE 5.01
and 5.5, hence the child selector hack */
* > #footer, * > form, * > #notes, * > .output
    
{
    
positionrelative;
    
z-index1000;
    }
/* ]]> */
</style>
<
style type="text/css">
@
import url(onetruelayout3.css);
</
style>
</
head>
<
body>
<
div id="header">
<
h1>Equal Height Columns</h1>
</
div>
<
div id="wrapper">

<
div id="block_1">
<
h2>Block 1</h2>
<
p>Filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler</p>
<
p>Filler</p>
<
p>Filler</p>
<
p>Filler</p>
<
p>Filler</p>
<
p>Filler</p>
<
p>Filler</p>

<
p>Filler</p>
<
p>Filler</p>
<
p>Filler</p>
<
p>Filler</p>
<
p>Filler</p>
<
p>Filler</p>
<
p>Filler</p><p>Filler</p>
<
p>Filler</p>

<
p>Filler</p>
<
p>Filler</p>
<
p>Filler</p>
<
p>Filler</p>
<
p>Filler</p>
<
p>Filler</p>
<
p>Filler</p>
<
p>Filler</p>
<
p>Filler</p>

<
p>Filler</p>
<
p>Filler</p>
<
p><a href="http://www.fu2k.org/dev/null" title="Dummy link to test that link works OK">Last filler</a></p>
</
div>
<
div id="block_2">
<
h2>Block 2</h2>
<
p>Filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler</p>
<
p>Filler</p>
<
p>Filler</p>
<
p>Filler</p>

<
p><a href="http://www.fu2k.org/dev/null" title="Dummy link to test that link works OK">Last filler</a></p>
</
div>
<
div id="block_3">
<
h2>Block 3</h2>
<
p>Filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler</p>
<
p>Filler</p>
<
p>Filler</p>
<
p><a href="http://www.fu2k.org/dev/null" title="Dummy link to test that link works OK">Last filler</a></p>
</
div>
</
div><!-- close div#wrapper -->
<div id="footer">

<
p><a href="http://www.fu2k.org/dev/null" title="Dummy link to test that link works OK">Footer text</a></p>
</
div>
</
body>
</
html
  #10 (permalink)  
Antiguo 05/01/2007, 18:21
Avatar de nicolaspar  
Fecha de Ingreso: noviembre-2004
Ubicación: Villa Ballester Bs-As|Ar
Mensajes: 2.002
Antigüedad: 13 años
Puntos: 34
Re: Misma altura a diferentes divs

Jenial, muchas gracias zsamer!!!
__________________
Mi punto de partida es Que Bueno Lo Nuevo
  #11 (permalink)  
Antiguo 05/01/2007, 19:20
 
Fecha de Ingreso: noviembre-2003
Mensajes: 798
Antigüedad: 14 años
Puntos: 8
Re: Misma altura a diferentes divs

de nada, espero que te sirva.

salu2
  #12 (permalink)  
Antiguo 06/01/2007, 14:34
Avatar de haron  
Fecha de Ingreso: febrero-2004
Ubicación: Cádiz (refinitivo)
Mensajes: 632
Antigüedad: 13 años, 9 meses
Puntos: 3
Re: Misma altura a diferentes divs

Esto no es mas facil?

Código PHP:
<table style='width: 100%; ' border='0' cellpadding='0' cellspacing='0'>
    <
tr><td>
        <!-- 
LEFT CONTENT -->
    </
td></tr>

    <
tr><td>
        <!-- 
CENTER CONTENT -->
    </
td></tr>

    <
tr><td>
        <!-- 
RIGHT CONTENT -->
    </
td></tr>
</
table
lo digo porque el CSS se invento para mejorar la vida del programador, no para complicarla.

lo que quiero decir con esto y que veo que ocurre muy a menudo, es que a veces tendemos a confundir "la herramienta" (en este caso el CSS) con el "objetivo para la que fue concebida" (en este caso para mejorar la calidad de vida del diseñador).

cuando esto no es asi, al carajo la herramienta! (es mi opinion).
  #13 (permalink)  
Antiguo 06/01/2007, 19:18
Avatar de bhagat  
Fecha de Ingreso: julio-2002
Ubicación: Granada
Mensajes: 469
Antigüedad: 15 años, 4 meses
Puntos: 7
De acuerdo Re: Misma altura a diferentes divs

Haron

te doy toda la razón, hay que escojer aquello que siendo igual de efectivo sea lo mas facil.

Y creo que con todas estas premisas, la solución de la tabla es mas simple, igual de correcta y funcional.

__________________
Por prudencia, la palabra SIEMPRE,
no la deberiamos usar NUNCA

Bhagat Dominguez
www.percusioncreativa.com
  #14 (permalink)  
Antiguo 06/01/2007, 20:11
 
Fecha de Ingreso: noviembre-2003
Mensajes: 798
Antigüedad: 14 años
Puntos: 8
Re: Misma altura a diferentes divs

Las tablas no cumplen con el estandar para maquetar sitios web, la idea es programar con calidad y el css permite trabajar en capas para facilitar la mantención y escabilidad del desarrollo.

salu2
  #15 (permalink)  
Antiguo 07/01/2007, 08:51
Avatar de bhagat  
Fecha de Ingreso: julio-2002
Ubicación: Granada
Mensajes: 469
Antigüedad: 15 años, 4 meses
Puntos: 7
Pregunta Re: Misma altura a diferentes divs

Yo tambien intento maquetar con CSS, pero creo que en determinados casos las tablas cumplen su función, y si simplifica el codigo y el trabajo del webmaster, no veo porque no usar una herramienta mas sencilla e igual de efectiva.

Cita:
Las tablas no cumplen con el estandar para maquetar sitios web........para facilitar la mantención y escabilidad del desarrollo.
Sinceramente no se a que te refieres para un caso como el que abre este post, que es 1 pagina web, no todo un sitio web.

Te lo pregunta alguien como yo, apasionado de las CSS, que cada día me fascinan las posibilidades, y cada dia las uso mas, de hecho ya he desarrollado webs enteras sin una sola tabla. Pero me parece que las tablas no son el demonio, estan ahí para poder ser usadas cuando se crea conveniente, como puede ser este caso. (opino)

siendo mas concreto, en un caso como este (1 sola pagina web) ¿porque debería usar un codigo mas extenso y laborioso con CSS en lugar de tablas con un codigo mas simple e igual de efectivo?

Agradezco sinceramente que alguien me de una respuesta convincente.

__________________
Por prudencia, la palabra SIEMPRE,
no la deberiamos usar NUNCA

Bhagat Dominguez
www.percusioncreativa.com
  #16 (permalink)  
Antiguo 07/01/2007, 21:23
 
Fecha de Ingreso: noviembre-2003
Mensajes: 798
Antigüedad: 14 años
Puntos: 8
Re: Misma altura a diferentes divs

ok, yo tampoco soy enemigo de las tablas, ni las concidero el demonio, también las uso en determinado casos, pero yo para maquetar sitios trato de evitarlas lo más posible, siempre hay una salida o solución con CSS.

Generalmente las tablas las uso para grillas (mostrar datos tabulados de una db)

salu2.
  #17 (permalink)  
Antiguo 07/01/2007, 23:18
 
Fecha de Ingreso: mayo-2006
Mensajes: 50
Antigüedad: 11 años, 6 meses
Puntos: 0
Re: Misma altura a diferentes divs

bueno yo uso un truqillo que pienso te iria bien si quieres resolver rápido el problema. Se trata de crear columnas falsas con background-image, aqui es donde lo encontré, leelo:

platea.pntic.mec.es/jmas/manual/html/falsascolumnas.html
  #18 (permalink)  
Antiguo 08/01/2007, 07:14
 
Fecha de Ingreso: noviembre-2003
Mensajes: 798
Antigüedad: 14 años
Puntos: 8
Re: Misma altura a diferentes divs

Cita:
Iniciado por freeware Ver Mensaje
bueno yo uso un truqillo que pienso te iria bien si quieres resolver rápido el problema. Se trata de crear columnas falsas con background-image, aqui es donde lo encontré, leelo:

platea.pntic.mec.es/jmas/manual/html/falsascolumnas.html
asi es, es otra técnica muy usada.

dejo otro link de ésta técnica.
http://www.alistapart.com/articles/fauxcolumns/
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 17:00.