Problema con div (alturas)

[cala932]

Buenas Foreros tengo el siguiente problema que no se como puedo solucionarlo espero que puedan tirarme un par de ideas. El tema es el siguiente resulta que tengo el contenido de la web seccionado en tres columnas por ejemplo:

Código HTML:

<div id="columnaUno">
        contenido columna uno
     </div><!--end columna uno-->
<div id="columnaDos">
        contenido columna dos
     </div><!--end columna dos-->
<div id="columnaTres">
        contenido columna tres
     </div><!--end columna tres--> 

Cada div tiene un color de fondo distinto, el problema viene cuando el contenido de la columna dos crece mas que las otras, las alturas de las columnas uno y tres quedan mas cortas, la pregunta es de que manera se pueden igualar las alturas dinamicamente. Gracias de antemano.
Saludos

[cristian_cena]

Aquí te dejo unos enlaces que apuntan a tu problema. Yo utilizo el "método" de vectoralia.com

Saludos!

[cala932]

buenas cristian_cena muchas gracias por responder ahora reviso el enlace que me pasas y te cuento Saludos man.!!!

[cala932]

Holas aqui va otra manera de solucionar el problema mediante javascript, lo que hace es determinar cual es el div de mayor alto y en base a eso asignar esa altura al resto, lo dejo por si a alguien le sirve

Código HTML:

<script type="text/javascript">
    //values
    var c2_val = document.getElementById('columnaDos').offsetHeight;
    var c1_val = document.getElementById('columnaUno').offsetHeight;
    var c3_val = document.getElementById('columnaTres').offsetHeight;

    //id
    var c1_id = document.getElementById('columnaUno');
    var c2_id = document.getElementById('columnaDos');
    var c3_id = document.getElementById('columnaTres');

    var maximo = Math.max(c1_val,c2_val,c3_val);

    if(maximo == c1_val){
    document.write('<style> .columnaDos{ height:  '+maximo+'px; } </style>');
    document.write('<style> .columnaTres{ height:  '+maximo+'px; } </style>')
    }

    if(maximo == c2_val){
    document.write('<style> .columnaUno{ height:  '+maximo+'px; } </style>');
    document.write('<style> .columnaTres{ height:  '+maximo+'px; } </style>')
    }

    if(maximo == c3_val){
    document.write('<style> .columnaDos{ height:  '+maximo+'px; } </style>');
    document.write('<style> .columnaUno{ height:  '+maximo+'px; } </style>');
    }


</script> 

Saludos

[cristian_cena]

Che que bueno que compartas esa solución, ahora, es multibrowser?

[bkolores]

y no seria mejor poner height con una altura fisica... así es más simple y soluciona el cacho

[cala932]

Hola cristian_cena lo he probado con IE y firefox (ulimas versiones de ambos) y funciona bien.

Saludos.

[alexk]

cristian_cena

Che que bueno que compartas esa solución, ahora, es multibrowser?

hombre para los que tengan desactivado el JS no

bkolores

y no seria mejor poner height con una altura fisica... así es más simple y soluciona el cacho

poner una altura fija pues no... ya que por eso son "COLUMNAS EQUILIBRADAS" y si una tiene mas contenido que otro pues siguen del mismo tamaño... y por ende si una supera la altura "fija" que le indicas se cortara y saldra el texto fuera de la capa... asi que no es una solucion....

"altura minima tampoco" enfin las soluciones ya estan dadas en el foro es cuestion de buscar

[cristian_cena]

Iniciado por alexk

hombre para los que tengan desactivado el JS no

Creo que fue clara mi pregunta, mas gracias por tu aporte alex, muy buena observación.

[OmarV]

La accion para solucioar tu problema mas basica con css que se me ocurre es el wrapper,

<style>
#wrapper{
margin:0 auto;
width:600px;
}
#maincontent{
border-right:solid 200px #DFDFDF;
position:absolute;
width:400px;
}
#sidebar{
background:#DFDFDF;
margin-left:400px;
position:absolute;
width:200px;
}
</style>
<div id="wrapper">
<div id="maincontent">... xdd <br>xdd<br></div>
<div id="sidebar">...</div>
</div>

asii las dos divs tendran la misma altura (:

[cala932]

Buenas Gente encontre otra forma mas para resolver el problema de las alturas, asi que la comparto.

Código:

$(document).ready(function() {
function equalHeight(group) {
tallest = 0;
group.each(function() {
thisHeight = $(this).height();
if(thisHeight > tallest) {
tallest = thisHeight;
}
});
group.height(tallest);
}
// how to use
$(document).ready(function() {
equalHeight($(”.left”));
equalHeight($(”.right”));
});
});

Fuente

Saludos.