Si ya lo se xanfran, es verdad lo que decís. Pero consideré que la sección del medio era la más larga.
Si no es así, ya es un tema de equal-height cols: http://www.positioniseverything.net/articles/onetruelayout/equalheight O como solución más simple, que la sección media tenga un min-height mayor al alto total de la 3ra columna. Eso ya dependerá del diseño en cuestión On Fri, Aug 22, 2008 at 3:39 PM, xanfran <[EMAIL PROTECTED]> wrote: > A lo mejor me expliqué mal. > > Aprovechando tu ejemplo: > > <!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>Untitled Document</title> > <style type="text/css"> > .contenedor {width:100%; margin:30px auto;} > .div1 {float:left; width:25%; background:yellow;} > .div2 {float:left; width:25%; background:lime;} > .div3 {background:red;} > </style> > </head> > > <body> > > <div class="contenedor"> > <div class="div1">Contenido 1</div> > <div class="div2">Contenido 2</div> > <div class="div3">Lorem ipsum dolor sit amet, consectetuer > adipiscing > elit. Phasellus ac libero sed massa fermentum pretium. Duis vehicula. > Phasellus et elit at enim vestibulum posuere. Donec malesuada, augue vitae > elementum ornare, lacus enim porta est, nec laoreet diam purus eu lacus. > Cras viverra, massa vitae mattis convallis, urna ante porttitor lorem, vel > sodales leo ipsum ut tortor. Sed in leo quis leo malesuada tincidunt. Nunc > vestibulum ipsum vitae dui. Sed elementum sapien ac ante. Donec fermentum, > tellus in malesuada feugiat, pede lectus iaculis ipsum, ut blandit risus > nulla a risus. Pellentesque viverra, metus vel sollicitudin rutrum, risus > pede scelerisque leo, quis adipiscing magna eros non mi. Morbi lectus > mauris, rutrum ac, tristique non, tincidunt vitae, tellus. Suspendisse > potenti. Donec ligula dui, porta id, viverra et, molestie ut, lectus. > Mauris > hendrerit quam non eros. Vivamus volutpat. Nulla feugiat molestie risus. > Mauris non metus sit amet orci rhoncus commodo. Duis quam. Praesent pretium > est vel lorem.</div> > </div> > > <div class="contenedor"> > <div class="div2">Contenido 2</div> > <div class="div3">Lorem ipsum dolor sit amet, consectetuer > adipiscing > elit. Phasellus ac libero sed massa fermentum pretium. Duis vehicula. > Phasellus et elit at enim vestibulum posuere. Donec malesuada, augue vitae > elementum ornare, lacus enim porta est, nec laoreet diam purus eu lacus. > Cras viverra, massa vitae mattis convallis, urna ante porttitor lorem, vel > sodales leo ipsum ut tortor. Sed in leo quis leo malesuada tincidunt. Nunc > vestibulum ipsum vitae dui. Sed elementum sapien ac ante. Donec fermentum, > tellus in malesuada feugiat, pede lectus iaculis ipsum, ut blandit risus > nulla a risus. Pellentesque viverra, metus vel sollicitudin rutrum, risus > pede scelerisque leo, quis adipiscing magna eros non mi. Morbi lectus > mauris, rutrum ac, tristique non, tincidunt vitae, tellus. Suspendisse > potenti. Donec ligula dui, porta id, viverra et, molestie ut, lectus. > Mauris > hendrerit quam non eros. Vivamus volutpat. Nulla feugiat molestie risus. > Mauris non metus sit amet orci rhoncus commodo. Duis quam. Praesent pretium > est vel lorem.</div> > </div> > > </body> > </html> > > 2008/8/22 Ignacio Ricci <[EMAIL PROTECTED]> > > > <!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>Untitled Document</title> > > <style type="text/css"> > > .contenedor {width:100%; margin:30px auto;} > > .div1 {float:left; width:25%; background:yellow;} > > .div2 {float:left; width:25%; background:lime;} > > .div3 {background:red;} > > </style> > > </head> > > > > <body> > > > > <div class="contenedor"> > > <div class="div1">Contenido 1</div> > > <div class="div2">Contenido 2</div> > > <div class="div3">Contenido 3</div> > > </div> > > > > <div class="contenedor"> > > <div class="div2">Contenido 2</div> > > <div class="div3">Contenido 3</div> > > </div> > > > > </body> > > </html> > > > > > > > > > > > > > > > > > > > > > > > > > > 2008/8/22 Ignacio Ricci <[EMAIL PROTECTED]> > > > > > Es CSS básico... Pruebenlo. > > > > > > > > > 2008/8/22 xanfran <[EMAIL PROTECTED]> > > > > > > Hola Ignacio > > >> > > >> ¿Y eso funciona? Lo digo porque creo que si el contenido de la columna > > >> #derecha es mayor que la de # medio, el contenido de #derecha acabará > > >> posicionándose debajo de #medio. > > >> > > >> La solución de Almorca si que la veo más correcta. Sumar a la columna > > que > > >> se > > >> desea, el ancho de la columna que ocultas, para que las columnas que > > >> queden > > >> visibles, ocupen el 100% > > >> > > >> 2008/8/22 Ignacio Ricci <[EMAIL PROTECTED]> > > >> > > >> > Fácil: > > >> > > > >> > *#derecha {}* > > >> > > > >> > Que no flote, y que no tenga ancho. Tomará el espacio que le queda y > > se > > >> > acoplará al div flotador izquierdo. > > >> > > > >> > 2008/8/22 Almorca <[EMAIL PROTECTED]> > > >> > > > >> > > Con lo que has puesto no te se decir a ciencia cierta pero yo creo > > que > > >> lo > > >> > > que te pasa es que ocultas #izquierda pero a #medio no le dice que > > >> pase a > > >> > > ocupar 50%. Si puedes poner la dirección donde está la web te > podré > > >> dar > > >> > una > > >> > > solución más «aproximada». > > >> > > > > >> > > El 22 de agosto de 2008 19:31, alarkspur <[EMAIL PROTECTED]> > > >> escribió: > > >> > > > > >> > > > Buenas lista, > > >> > > > > > >> > > > Ji, me ha quedado un asunto de mail muy "galletita de la suerte" > > >> bueno > > >> > > > al grano, verán, en mi empeño por aprender css estaba generando > > una > > >> > > > plantilla de 3 columnas, el código tal que así (pongo solo lo > > >> general > > >> > > > para no extenderme mucho) > > >> > > > > > >> > > > #content { width: 100%} > > >> > > > > > >> > > > #izquierda { width: 25%; float: left} > > >> > > > > > >> > > > #medio {width: 25%; float: left} > > >> > > > > > >> > > > #derecha {width: 50%; float: left} > > >> > > > > > >> > > > Las 3 columnas (izquierda, medio y derecha) se encuentran dentro > > del > > >> > > > div content > > >> > > > > > >> > > > He preparado un javascript muy molón que me oculta #izquierda si > > así > > >> > > > se desea, lo que ocurre es que al ocultar #izquierda el texto > que > > se > > >> > > > encuentra en #derecha no fluye para ajustarse al espacio en > blanco > > >> que > > >> > > > ha quedado en el margen derecha. > > >> > > > > > >> > > > He probado a insertar varios div con un widht: 100% y unos > cuantos > > >> > > > autos dentro de #derecha pero no ha habido manera :-( > > >> > > > > > >> > > > Podrían orientarme para si es posible realizar lo que les > comento. > > >> > > > > > >> > > > Muchas gracias por la ayuda. > > >> > > > > > >> > > > Un saludo. > > >> > > > > > >> > > > > > >> > > > > > >> > > > _______________________________________________ > > >> > > > Lista de distribución Ovillo > > >> > > > Para escribir a la lista, envia un correo a > > [email protected] > > >> > > > Puedes modificar tus datos o desuscribirte en la siguiente > > >> dirección: > > >> > > > http://lists.ovillo.org/mailman/listinfo/ovillo > > >> > > > > > >> > > > > >> > > > > >> > > > > >> > > -- > > >> > > We don't need no education - Pink Floyd > > >> > > _______________________________________________ > > >> > > Lista de distribución Ovillo > > >> > > Para escribir a la lista, envia un correo a > [email protected] > > >> > > Puedes modificar tus datos o desuscribirte en la siguiente > > dirección: > > >> > > http://lists.ovillo.org/mailman/listinfo/ovillo > > >> > > > > >> > > > >> > > > >> > > > >> > -- > > >> > ↓ Ignacio Ricci > > >> > www.ignacioricci.com > > >> > _______________________________________________ > > >> > Lista de distribución Ovillo > > >> > Para escribir a la lista, envia un correo a [email protected] > > >> > Puedes modificar tus datos o desuscribirte en la siguiente > dirección: > > >> > http://lists.ovillo.org/mailman/listinfo/ovillo > > >> > > > >> > > >> > > >> > > >> -- > > >> Un saludo > > >> _______________________________________________ > > >> Lista de distribución Ovillo > > >> Para escribir a la lista, envia un correo a [email protected] > > >> Puedes modificar tus datos o desuscribirte en la siguiente dirección: > > >> http://lists.ovillo.org/mailman/listinfo/ovillo > > >> > > > > > > > > > > > > -- > > > ↓ Ignacio Ricci > > > www.ignacioricci.com > > > > > > > > > > > -- > > ↓ Ignacio Ricci > > www.ignacioricci.com > > _______________________________________________ > > Lista de distribución Ovillo > > Para escribir a la lista, envia un correo a [email protected] > > Puedes modificar tus datos o desuscribirte en la siguiente dirección: > > http://lists.ovillo.org/mailman/listinfo/ovillo > > > > > > -- > Un saludo > _______________________________________________ > Lista de distribución Ovillo > Para escribir a la lista, envia un correo a [email protected] > Puedes modificar tus datos o desuscribirte en la siguiente dirección: > http://lists.ovillo.org/mailman/listinfo/ovillo > -- ↓ Ignacio Ricci www.ignacioricci.com _______________________________________________ Lista de distribución Ovillo Para escribir a la lista, envia un correo a [email protected] Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo
