JMiur [E]

Da la casualidad que, mientras iba armando esta entrada, fueron varias las preguntas sobre el mismo tema y es, sin duda, uno de esos temas aparentemente extraños que parecen causar dolores de cabeza. Se trata de tener un diseño con columnas e igualar sus alturas.

Hace un tiempo, la solución era mostrada en La Bloguería así que vamos a a usar sus explicaciones y ponerlas en práctica, basándonos en una de las variantes del tutorial anterior.

Allí, se mostraba algo así:


Es decir, un blog con tres columnas (sidebar izquierda, posts, sidebar derecha) pero, en realidad, esta soluciòn funcionará con cualquier otro diseño.

¿Cuál es el problema?

Los contenedores (y casi todas la etiquetas) tienen un particularidad, podemos definir su ancho (width) pero cuando queremos definir su altura (height) las cosas se complican porque para calcular esa altura deberíamos conocer su contenido y calcularlo, aunque sea a ojo pero, como los blogs son dinámicos, eso es imposible así que, las columnas tomarán diferentes alturas, unas más cortas, unas más largas; podemos fijarlas pero, en ese caso, o quedarán espacios vacios o parte del contenido quedará oculto o aparecerá una barra de desplazamiento vertical.


Si utilizamos una plantilla sin fondos ni bordes, es un tema irrelevante pero si los tenemos, el efecto de las columnas desiguales puede molestarnos.

Entonces, ¿cómo crear columnas de la misma altura sin que importe el contenido de estas?

Como dice Vane, hay soluciones varias y para todos los gustos:
  1. crear columnas falsas utilizando imágenes tiene la desventaja de requerir de esas imágenes extras
  2. establecer la propiedad height al 100% no funciona en todos los navegadores
  3. utilizar JavaScript tiene resultados dudosos y claro, no funcioanrá si JavaScript está deshabilitado.
Así que vamos con el cuarto método que me parece más efectivo y para aplicarlo, sólo requerimos agregar unas pocas propiedades CSS.

Buscaremos cada una de las definiciones de las columnas y a todas ellas les agregaremos un padding (un relleno) de un valor muy alto, el máximo posible (32768 pixeles) y eso creará columnas larguísimas y para compensar esta locura, le agregaremos un margen negativo inverso:

padding-bottom: 32768px;
margin-bottom: -32768px;

Para que estos desarreglos se oculten, el contendor principla tendrá que incluir la propiedad overflow: hidden. En el ejemplo, estas serían las definiciones de estilo:
#sidebar-wrapper1 { /* la sidebar izquierda */
background-color: aliceBlue; /* un color para el ejemplo */
float: left;
margin: 0; /* poner a cero */
overflow: hidden;
padding-bottom: 32768px;
width: 190px;
word-wrap: break-word;
margin-bottom: -32768px;
padding-bottom: 32768px;
}

#main-wrapper { /* el área de posts */
background-color: aliceBlue; /* un color para el ejemplo */
float: left;
margin: 0 10px;
overflow: hidden;
width: 560px;
margin-bottom: -32768px;
padding-bottom: 32768px;
}

#sidebar-wrapper2 { /* la sidebar derecha */
background-color: aliceBlue; /* un color para el ejemplo */
float: left;
margin: 0;  /* poner a cero */
overflow: hidden;
width: 190px;
word-wrap: break-word;
margin-bottom: -32768px;
padding-bottom: 32768px;
}

#content-wrapper {
overflow: hidden;
}
Lo prudente sería que, primero, coloquemos los márgenes en cero y luego aplicáramos los márgenes gigantes a todas las columnas que tengamos.

Eso es todo, con estos pequeños cambios, no debería haber problemas en igualar la longitud de las columnas.

REFERENCIAS:
  • Modificando las plantillas (Tutorial 1: Anchos)

  • Modificando las plantillas (Tutorial 2: Widebars)

  • Modificando las plantillas (Tutorial 3: Sidebars)

  • Modificando las plantillas (Tutorial 4: Flotaciones)

  • 55 comentarios:

    Esteban  

    Muy pero muy bueno!!

    Justo me preguntaba ese detalle y me leiste la mente xD!!

    Responder
    Jorge Ruiz  

    Excelente

    Solo una pregunta: Me gustaria agregar en el footer o pie de pagina digamos tres colunmas, basicamente dividirlo para poder poner comentarios recientes, entaradas recientes o cualquier otra cosa, como haria eso?

    Responder
    JMiur  

    Tebito:
    Pués ha sido la semana de ese tema :D

    Jorge R:
    Sería un poco compliado de explicar en abstracto pero es posible hacerlo sin problemas o con pocos problemas. Veré si puedo explicarlo en un post. Sino, me envias un mail y vemos tu caso específico.

    Responder
    j a v i e r . g m  

    Ufff, increíble lo que me costó lograrlo en mi blog personal, ya que cada sidebar tenía dos, y cada una de esas estaba compuesta por dos más para poder lograr los bordes redondos. Finalmente lo consegui cambiando el borde superior del footer con una imagen que completara los bordes de las tres columnas, ya que al "alargarlas" se cortaban en linea recta al terminar el bloque.

    De todas formas, ahora se ve mucho mejor que antes, ya que era imposible cuadrar las tres columnas, sobretodo cuando se expandian las entradas..

    Saludos.

    Responder
    JMiur  

    Claro, al tener imágenes de fondo en la parte inferior hay que ver como funcionaría. Voy a probarlo a ver que pasa.

    Responder
    Anónimo  

    J intenté ponerlo como dice Vanesa y quedaba hecho un horror!!!...pero como todo si ella lo ha probado es así y estaba cometiendo errores, probaré nuevamente...te diré qué pasa...Saludos!!!

    Responder
    JMiur  

    Graciela, colocalo y me avisas, fijate bien que un valor es positivo y el otro es negativo. Salvo algún problema con el footer que luego puede corregirse, no debería tener problemas.

    Responder
    Deybi  

    Hola JMIur.

    Sinceramente que a mi no me queda bien, sigue todo para abajo y se ve medio feo encima de mi footer, parece que algo no va con mi plantilla, porque he cambiado todo y nada!!!.

    Saludos, espero tu ayuda!.

    Responder
    JMiur  

    Hasta donde puedo probar online, en el caso de Zona Cerebral, agregando:
    margin-bottom:-32768px;
    padding-bottom:32768px;

    a estos tres elementos:
    #main-wrapper
    #sidebar-wrapper
    #newsidebar-wrapper

    el gris oscuro de las sidebars se extiende hasta el negro del footer. No sé que es lo que ves cuando colocas esas propiedades. Tal vez una captura de la pantalla ayude.

    Responder
    Anónimo  

    El tutorial original fue publicado hace tiempo en: http://metalize.liveonstyle.com/2007/08/13/columnas-100-altas/

    Responder
    JMiur  

    ¿No me digas? ¿Quiere decir que los enlaces que figuran en el post los coloqué de pura casualidad? ¡Qué bien! ¡Soy adivino!

    Ayyy Ayyy Ayyy Anónimo, que imbécil eres XD

    Responder
    Gem@  

    Que mala costumbre de leer por encima y tomarse la libertad de opinar (malamente)

    Responder
    JMiur  

    Y con este calor :D

    Responder
    Gem@  

    En el ejemplo que añades ¿está añadido margin-bottom: -32768px; y padding-bottom: 32768px; ? con tanta prueba ya no veo las cosas :O

    Responder
    JMiur  

    Sí, Gem@. aunque el ejemplo es un poco mñas complejo porque es el mismo blog que uso para todos los otros ejemplos, esa parte es tal cual. De todas maneras, acabo de enviarte un mail respondiendo a una pregunta que tiene que ver con esto y que agrego acá porque podría ser el problema de muchos.

    Si el diseño tiene un borde inferior en el main o en la sidebar, usando esta técnica, ese borde no se verá, hay que pensar entonces en poner ese borde en el footer, por ejemplo. Esa solución está explciada más ampliamente en el post de La Bloguería.

    El otro problema que puede surgir es que si hay anchors (enlaces internos), ciertas partes quedarán ocultas y eso sí que es un problema sin solución y, en ese caso, hay que utilizar alguna otra técnica con imágenes de fondo. Voy a ver si puedo mostrarlo en alguna entrada futura aunque está explciado en lel post de metalize.

    Responder
    Gem@  

    Te contesté al correo, voy a intentarlo ;)

    Responder
    JMiur  

    Idem :D

    Esto es un chat estereofónico :D

    Responder
    Gem@  

    jajajaja si, últimamente parece que vivo en un chat :)

    Responder
    Admin  

    Bueno acabo de hacerlo en blog de pruebas con la Minima, parece que está todo bien, pero me pregunto, hay que ponerle la misma cantidad de gadget de un lado que del otro no? Digo en las sidebares... porque supongo que si una tiene mas que la otra no van a quedar parejas por mucho código que tengan no? ¿O si? :O

    Después voy a atacar a Te Propongo que ese si que es un desafío grande ehh :D

    Fijate como me quedó: Pruebas2

    Responder
    Admin  

    No, no puedo en Te Propongo :( Te puedo mandar la plantilla o la parte donde puse lo del area y las dos sidebares?
    Es blog de pruebas (el que agrandé) y no me la guarda ni me muestra la vista previa, me dice:Mensaje de error de XML: The element type "body" must be terminated by the matching end-tag "".
    Y ya revisé todo y no encuentro nada mal cerrado :'( buaaaaa

    Responder
    JMiur  

    La cantidad de elementos de cada sidebar es subjetivo, salvo milagros, no vas a conseguir nunca que sean exactametne de la misma altura.

    Podés mandarla pero explicame bien la idea y qué hiciste.

    Responder
    S. C. P.  

    Hola, JM.
    Volví de las vacaciones y retomé el tutorial. Venía bárbaro, sin problemas, pero resulta que por más esfuerzos que hago, mi pensamiento sigue siendo lineal y la vida no es así. Quiero poner dos gadgets contiguos al inicio. Así que me dije, fantástico, pongo el área de sidebar arriba de la vieja sidebar y toy pronta. (No te rías de mí que soy una señora mayor, ché) Así que fui e invertí el orden de ambas. Primero la sidebar area y luego la sidebar wrapper. Voy a vista previa y nada, claro. Todo igual como siempre. Dígame doctor, ¿qué puedo hacer para conseguir ese resultado?
    Ya sé que dirás que no va a quedar estéticamente bien pero es que allí voy a colocar dos cosas del mismo tamaño que prácticamente no voy a tocar luego, o tocaré muy poco... Vamos, JM, ¡prende la máquina de arriba de tus cejas y crea que yo no puedo!

    silvia

    Responder
    JMiur  

    SCP: El concepto es ese, el por qué no se ve puede tener muchas explicaciones ¿Sería posible ver un ejemplo online?

    Una alternativa en abstracto es colocar un DIV más que abarque esa sidebar doble de arriba y esa sidebar simple de abajo.

    Imaginate. Hay dos columnas, la izquierda son los posts, la derecha todas las sidebars, ambas flotan.

    La de la derecha la didivo en dos partes, un DIV arriba (es que aqui llamamos sidebar-area) y la de abajo la "normal".

    Estoy hablando en voz alta :D tendría que verlo para darte una respuesta exacta.

    Responder
    S. C. P.  

    Te mandé por e-mail la dirección del experimento y alguna otra pregunta...

    beso

    Responder
    JMiur  

    Acabo de recibirlo :)

    Responder
    2KN1GHT  

    Es el primer comentario que hago, pero la verdad es que tengo ya tiempo visitando tu blog. Esta excelente!!!!

    El efecto me salio mas que bien. Pero me surgio un problemita:(

    Tengo unos gifs con link en el pie de pagina y se me taparon. (como que quedaron abajo) no se si me explico. Ahora tengo que descubir como ponerlos otra vez encima.

    Ese era todo mi comentario.

    Saludos.

    Responder
    JMiur  

    2KN1GHT:
    Creo entender el problema. Las imágenes del footer quedan "detras".

    Prueba agregarle al footer la propiedad position:

    #footer {
    .................
    position: relative;
    }

    Responder
    2KN1GHT  

    Ya habia escrito un choro, pero no se que paso que no se grabo el mensaje. En resumidas cuentas solo queria agradecerte por contestar tan rapido y felicitarte porque eres un guru en esto. El tip que me diste sobre el footer funciono de maravilla.

    Muchas gracias y por aqui seguiremos aprendiendo y admirandote.

    Tu amigo 2KN1GHT.

    Responder
    JMiur  

    Lo de los comentarios es usual ... ya me tiene harto eso de escribir dos o tres veces lo mismo :)

    Me alegra mucho que sirviera. TE confieso que tenía mis dudas :)

    Responder
    2KN1GHT  

    El problema de el comentario en mi caso(y con blooger nadamas) es porque dice que tengo inactivadas las cookies. Pero ya cheke el firefox y las tengo activadas. En el kaspersky no encontre nada relacionado a las cookies (ese a de ser mi problema). Siempre batallo al entrar a mi blog por este motivo. Pero bueee!! son cosas que nos pasan a los newbies:P

    Gracias de nuevo, y seguire dandote lata:O Bueno pasaria mucho tiempo alabando tu blog, mejor me retiro.

    P.D. No es necesario que contestes este mensaje;)

    Responder
    gab  

    ja ja que bien mi buen amigo, si me permite decirle amigo. sabe su forma de decir lo de (eso creará columnas larguísimas y para compensar esta locura, le agregaremos un margen negativo inverso.....) e gusta porque lo dice una forma muy buena sin maldad. con respecto a su ayuda esta muy buena, ya que lo que intento es poner un footer on tres espacios. gracias por la ayuda. saludos desde pèru

    Responder
    JMiur  

    Saludos, gracias por comentar :D

    Responder
    Prof. Cristian E. Moyano  

    Hola Jmiur, que pasa si yo quisiera en cambio de 2 columnas de sidebars y en el centro el main-wrapper, 2 columnas de main-wrapper y una de sidebar a la derecha. Quedando 2 columnas para los post. ¿Cómo sería?. Mi idea surgió a partir de ésta página. La cual es un diario de Mendoza, Argentina.

    Responder
    JMiur  

    También sería posible aunque en ese caso, ya no se tartaría sólo de diagramar el CSS sino de cambiar el código que muestra las entradas individuales (el main se refiere a eso, el lugar donde van los posts) y ahí, debería verse que psa cuando abres un post individual.

    Responder
    Angela Arias Molina  

    Muchas gracias. Esta buscando esto por muchas partes y cae justo para el nuevo template que estoy diseñando.
    ¡Saludos!

    Responder
    Lujo  

    Hola J.Miur,
    Antes de nada perdón por interrumpir estas fechas de descanso. Ojalá las fiestas estén siendo tranquilas y el 2010 venga llenos de sueños cumplidos.

    He estado estudiando tu entrada atentamente, el post original de Metal.ize y la entrada de la Bloguería.

    Te escribo porque he llegado a un punto en el que estoy perdida. Intento ser concreta:

    1. El blog se ve genial a primera vista, si no trabajas en él.

    2. Problema: Tengo el buscador de google en la columna derecha (en naranja). Cuando hago una búsqueda no me permite volver arriba (al header).
    También se ve por abajo de la imagen, (donde tengo el footer), el truco de las columnas (parecen ir al infinito).

    3. Problema: Si tengo los comentarios activados en ventana incrustada, al dejar un comentario no me deja ir arriba y ver el resto de la entrada.

    ¿Se te ocurre alguna idea que me pueda orientar en saber que hago mal o cómo lo puedo solucionar?

    Gracias anticipadas por tu tiempo empleado y generosidad al compartir este truco.

    Responder
    Lujo  

    Re Hola J.Miur,

    Mil disculpas otra vez por acudir a ti.

    Se me ha ocurrido rehacer las instrucciones por enésima vez y he seguido sólo tus instrucciones.
    He conseguido corregir que las columnas se sigan viendo por debajo de la imagen que está en el footer.
    Parto de una plantilla de Blogger Thisaway y ésta no contiene el parámetro #content-wrapper { ; lo he añadido y la plantilla aceptado.

    Ahora el problema surge cuando dejo un comentario en el blog con la ventana incrustada. En ese momento deja de verse la parte superior de la zona de las entradas y la sidebar.


    Intuyo que es posible que deba definir <div id='content-wrapper'> pero por otro lado esa parte se me escapa y no creo que el "truco" sea tan complicado.

    Ojalá se te ocurra alguna orientación para poder solucionarlo.
    Nuevamente te agradezco el tiempo empleado y comprensión.

    Responder
    Lujo  

    Re Hola J.Miur,
    Estoy estudiando la entrada que pusiste en http://vagabundia.blogspot.com/2009/09/blogger-more-y-las-columnas-de-igual.html
    Intuyo que es probable que me la aconsejes.
    Gracias nuevamente.
    Pd: Hoy te estoy dando mucho la lata, sorry.

    Responder
    JMiur  

    Lujo:
    Pasemos a la otra entrada ya que, este tipo de solución se hace complicada. El tema es que haciéndolo de este modo, los enlaces internos que tengan un #nombre, no funcionarán bien y, el nuevo formulario de comentarios utiliza eso; he ahí el problema :(

    Responder
    Lujo  

    Tienes razón.
    Gracias J. Miur,
    Te agradezco enormemente tu respuesta.

    Responder
    JMiur  

    Se hace complicado cuando hay tantas versiones de IE dando vueltas :D

    Responder
    Anónimo  

    Oye Jmiur alguna plantilla que me recomiendes que sea facil de modificar y muy perzonalizable?

    Responder
    JMiur  

    No recomiendo plantillas, eso es muy subjetivo; la más simple es la Plantilla Minima.

    Responder
    pvillegasy  

    Hola Jmiur!, saludos. una preguntica, ¿como podría dejar una sidebar estática, por ejemplo en la parte izquierda del blog.

    Muchas gracias

    JMiur  

    Supongo que te refieres a agregarla la propiedad:
    position:fixed;
    pero, dependerá del sitio y de cómo esté diseñado.

    Responder
    badr  

    http://sinopsisdepeliculas2012.blogspot.com.es/ hola este es mi blog y quiero cambiar los post de pagina principal solo aparecen 7 y yo quiero uno 17 o mas

    JMiur  

    Lo puedes hacer en la Configuración de Blogger indicando la cantidad aunque, ese total, no será tenido en cuenta i el peso total de la página supera ciertos valores.

    Responder
    Unknown  

    Hola! excelente tu blog!!!
    tengo una consulta, hace un tiempo trate de editar mi plantilla, ya q tengo 3 columnas, pero en donde van las entradas esta en la parte derecha, osea tengo 2 columnas en la izq. y las entradas a la derecha. me preguntaba si es posible pasar la columna de las entradas hacia el medio y q las otras 2 columnas queden una en cada lado!
    este es mi blog http://cinerama-uy.blogspot.com
    te agradeceria si me pudieras orientar un poco al menos saber si es posible
    salu2

    JMiur  

    Para hacer algo así deberías reparar toda la estructura de la plantilla y tratar de entender cómo está construida ya que no hay dos sidebar sino una sola cuyo id es sidebar.

    Dentro de ese div hay otro llamado sidebar-left y dentro de ese hay otro llamado widgets que es el que contiene esa dos columnas internas: customwidget y customwidgetright

    Unknown  

    Muchas gracias!
    el otro dia probando pude cambiar y pasar para la izq la columna de las entradas, pero las otras 2 no las podia separar, ahora me voy a fijar en eso que me decis a ver si puedo.salu2

    Responder
    Juansi Rocket  

    Y como dejar la sidebar afuera del cuerpo del blog ?? Me resulta "poco conformante" la desición de descargar la plantilla "Xenon" de BTemplates, y me gustaria saber antes de tomar la definitiva desición definitiva xDD Se puede hacer algo similar con mi blog sin tener que necesariamente descargar desde BTemplates ?? (He leido algunas veces que trae algunos problemas a la hora de poder modificarla al antojo personal). Muchas gracias, esperaré esta ultima respuesta antes de arriesgarme a lo desconocido ´:)

    JMiur  

    No sé a que te refieres con dejarla afuera del cuerpo del blog. Si no quieres que haya dos columnas, debes colocar esa sidebar debajo del div cuyo id es main y modificar las propiedades de ambos.

    No sé a qué problemas se refiere lo que has leído así que no puedo responder eso. Cualquier plantilla puede ser modificada manualmente y dependerá de lo que cada uno sepa, o pueda hacer

    Juansi Rocket  

    Me refiero a esta plantilla: http://btemplates.com/2013/blogger-template-xenon/ Da la sensación de qe todo el cuerpo del blog está en la columna de texto y de qe la sidebar estuviera adherida a ello. Lo qe me gustaría saber es si es muy complicada la tarea de hacer manualmente algo similar. Nuevamente gracias por responder, el tener poco conocimiento con respecto al tema (deberé ilustrarme un poco) me obliga a preguntar opiniones antes de hacer un cambio y se qe es complicado para ustedes responder a tanta demanda de ayuda. Gracias (y)

    Juansi Rocket  

    PD: Me encantó tu página en Facebook !! Mezcla bastante bien la estética con un contenido interesante. Ya te sigo !!(y)

    JMiur  

    No veo nada particular en esa plantilla, simplemente, dentro del DIV main hay dos columnas, ambas flotan a la izquierda y no hay margen entre ellas; es "normal".

    Hacer eso es sencillo ya que tiene una estructura clásica. Sin embargo, si el blog que quieres modificar es el que se ve en tu perfil, recuerda que estás usando una plantilla de nuevo estilo y esas, son mucho más complejas y su estructura debe adaptarse mediante el editor de plantillas de Blogger.

    La plantilla Xenon es una plantilla común y debe editarse manualmente. Prefiero mil veces esas plantillas comunes a las de nuevo estilo las cuales no he usado nunca y no pienso usar porque son espantosamente engorrosas :D

    Responder

    ¿Quiere dejar un comentario?

    recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

    Nota: sólo los miembros de este blog pueden publicar comentarios.

    Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

    Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

     
    CERRAR