Muy amables por la ayuda, voy a echar un vistazo al enlace que comentáis y seguir probando con vuestros consejos para dar con la mejor solución.
Muchas gracias. Saludos. El 22/08/2008, a las 20:52, Ignacio Ricci escribió: > 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 _______________________________________________ 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
