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
