columnas discordantes

markez · #1 (**permalink**) 15/07/2009, 11:17

hola gente soy nuevo en el foro y este es mi primer post
tengo una duda con unas columnas que estan encerradas dentro de una clase y cuando una de ellas se expande las otras no lo hacen y esto genera un vacio, no se como se puede solucionar este problema

esta es la pagina

{rapidshare.com/files/256161632/inicio.html}

yo quisiera que cuando una se expanda las demas lo hagan tambien

kseso? · #2 (**permalink**) 15/07/2009, 11:58

www.araudi.net
Columnas equilibradas.
Bienvenido a fdw, Market.

alexk · #3 (**permalink**) 15/07/2009, 12:02

quieres igualar tus dos columnas?... pues solo conosco una manera y es darle un padding bottom enorme y luego restarselo con margin,

Código html:

Ver original<div class="all">
    <div class="contenido">
        <p>primera columna</p>
    </div>
    <div class="lateral">
        <p>segunda columna.</p>
    </div>
</div>

Código css:

Ver original.all{overflow:hidden;}
.contenido, .lateral{width:280px;padding:10px;float:left;padding-bottom:30000px;margin-bottom:-30000px;}

bueno chao y suerte!...

EDITO:kseso? me ganaste jeje, porcierto no conocia esa manera... te recomiendo lo que te dice kseso? markez, lo que te di puede dar problemas sino te maneja bien en el CSS. y tienes muchas areas pero bueno chao suerte y bienvenido

EDITO: de nuevo... gracias kseso? por la aclaracion

markez · #4 (**permalink**) 15/07/2009, 15:01

Epaleeeeee!!!
muchas gracias ksesos? y a alex k por sus respuestas, es increible lo rapido que contestaron, ya hasta parece chat de lo rapido

la primera sugerencia esta buena aunque es algo ilógico la disposición de los elementos eso de restarle -350 px al margen, algo descabellado jajjaja pero es lo mejor que se puede hacer lo creo yo también

Utilizé tu sugerencia alex porque ya tenia la disposición hecha y es mas rapido para mi cambiarlo en el codigo. Puedes decirme en que puede haber errores utilizando tu método? yo lo veo muy bueno

La proxima vez utilizaré la primera disposición de elementos aunque tendre que familiarizarme con eso

se los agradesco ya nos veremos, si pueden envien su correo para agregarlos y compartir ideas el mio es [email protected]

suerte

kseso? · #5 (**permalink**) 15/07/2009, 15:14

Me alegro Markez.
Alexk, siento decirte que tu código va a presentar problemas en el momento de aumentar el contenido de cualquiera de los div.
No "crecerán" conjuntamente las dos cajas. Y me temo que una empujará a la otra desplazándola.
Pero está bien el experimentar con el código.

Un saludo

alexk · #6 (**permalink**) 15/07/2009, 15:36

pues... lo aplique a un template y me funciono perfecto, en todos los navegadores...y si funciona, lo importante es el "overflow:hidden;", pero funciona perfecto. solo que tiende a colapsar con tus elementos flotados... pero para eso esta el famoso y antiguo "clear:fix" pero esta demás si tienes el resto bien implementado y con calma... pero si estoy de acuerdo que tu opción es la mas adecuada... pero las 2 funcionan chao!...

kseso? · #7 (**permalink**) 15/07/2009, 16:00

Hola AlexK
El overflow evita la aparición del scroll.
Pero tu código no hace que las dos columnas aparenten crecer conjuntamente cuando una de ellas aumente el contenido.
Para verificar mi suposición primera cargué tu código en el navegador (FF). Lo único que he añadido es un fondo a las cajas para visualizarlas.
Este es el resultado de añadir texto a una y otra clase. ".contenido" es el de color de fondo gris:

Esta solución sería muy fácil de solucionar utilizando en "display" los valores "table | table-row | table-cell", pero para complicarnos está el ie.

Un saludo, Alexk.

alexk · #8 (**permalink**) 15/07/2009, 16:11

exacto el uso del "display:table" arregla pero como te dije depende mucho de como lo tengas hecho pues aquí dejo un ejemplo de lo que dije, y perdona la insistencia pero funciona al 100%...
zoneartcss.com/ejemplos/css/div_100_height/div_100_height.html

PD:Estoy de acuerdo que no es la mejor manera, pero funciona, ademas mi primer post fue para preguntar como hago el "display:table" en crhome ya que este no lo lleva... pero bueno chao.

kseso? · #9 (**permalink**) 15/07/2009, 16:36

En tu página ahora ya sí funciona, pues has añadido anchura a los tres contenedores, Alexk.
Creo que para que quede completo tu código para futuros visitantes al tema sería conveniente que se las añadas al #3.

Un saludo

alexk · #10 (**permalink**) 15/07/2009, 16:44

ok... pense que se entendia... como los "float"tienen que llevar un "width", pero bueno ya lo corrijo... no me fije gracias por avisar... el error chao y suerte!...

markez · #11 (**permalink**) 16/07/2009, 11:01

hola amigos, encontre otra forma de equilibrar mis columnas y fue dandole bordes grandes del tamaño de la columna a y c y despues restando margen del mismo tamaño para que tenga la ilusion de columnas equilibradas. lo encontre en la pagina de jason cranford de su libro html y css advanced. visitenlo si aun no lo han hecho esta buenisimo

alexk · #12 (**permalink**) 16/07/2009, 11:30

mmmm markez esa solucion de la dio kseso? en la primer respuesta, chao y suerte