El ejemplo que he puesto es una versión reducida al mínimo de una plantilla de un gestor de contenidos y se supone que el ancho es variable dentro de unos límites. De todas formas, me valdría dejarlo fijo, lo probaré. También puedo usar otras soluciones como flotarlo todo o añadir un elemento que limpie los flotantes. Pero sobre todo lo que me interesa es saber si este comportamiento de Opera tal y como está el código es normal y si tiene fácil solución. En caso contrario el usar el método de overflow:hidden para limpiar flotantes perdería toda su efectividad.
Gracias. El 11/02/09, Ignacio Ricci <ignacio.ri...@gmail.com> escribió: > Probaste agregarle un ancho al contenedor aparte de overflow hidden? > > 2009/2/10 Daniel Navarro <webpe...@gmail.com> > >> Tengo un problema de diseño que no logro resolver para Opera. Estoy usando >> Opera 9.63 en WinVista 32bits. >> >> Cuando un elemento contiene flotantes en su interior, éstos pueden >> sobresalir de los límites de su contenedor. Una solución que se puede >> adoptar para que el contenedor se ensanche con los flotantes consiste en >> establecer la propiedad clear:both a algún elemento dentro del contenedor >> que esté detrás de los flotantes. Si no se dispone de ninguno, se puede se >> colocar de forma artificial en el código html, bien directamente (ej. <br >> style="clear:both">, bien mediante el pseudoelemento :after en las css. >> >> Existen otros métodos como se explica en >> http://www.sitepoint.com/blogs/2005/02/26/simple-clearing-of-floats/ >> >> En el ejemplo que más abajo os muestro, estoy usando el método de Paul >> O'Brien que consiste en establecer overflow:auto en el contenedor. También >> vale overflow:hidden. >> >> Sin embargo, en cuanto establezco esta declaración Opera calcula de forma >> diferente los márgenes y el contenido se estrecha demasiado. Podéis probar >> a >> incluir o no overflow:hidden para ver su efecto. >> >> Por último, aunque no es de mi agrado, he intentado usar el hack para >> Opera >> html:first-child #contenido { >> margin: 0; >> } >> pero no funciona ¿? >> >> ¿alguna idea? >> >> >> *CÓDIGO HTML* >> >> <!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"; xml:lang="es-ES" lang="es-ES"> >> <head> >> <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> >> <title>Problema Opera</title> >> <link rel="stylesheet" type="text/css" href="estilos.css" /> >> </head> >> >> <body> >> >> <div id="bar1"> >> <div id="bar1"> >> </div> >> >> <div id="bar2"> >> <div id="bar2"> >> </div> >> >> <div id="content"> >> <h1>Problema en Opera 9 con overflow:hidden</h1> >> El div#content, con fondo rojizo, debe de extenderse para incluir a los >> dos >> párrafos flotantes. >> Para ello, se ha establecido overflow: hidden. >> Se ha dejado espacio para las barras laterales estableciendo margin: 0 >> 250px; >> >> <p id="p1"> >> Párrafo flotante a la izquierda >> </p> >> >> <p id="p2"> >> Párrafo flotante a la derecha >> </p> >> </div> <!-- Fin #content --> >> >> </body> >> </html> >> >> >> >> >> *CSS* >> >> /* Anula rellenos y márgenes predeterminados del navegador */ >> * { >> padding: 0; >> margin: 0; >> } >> >> #content { >> overflow: hidden; /* Declaración con la que se produce el problema en >> Opera */ >> margin: 0 220px; /* espacio para alojar las barras laterales. >> Opera lo calcula mal si se establece overflow:hidden >> */ >> background-color: #fcc; >> border: 2px solid red; >> } >> >> html:first-child #content { >> margin: 0; /* Este hack para Opera no funciona ¿por qué? */ >> } >> >> >> p#p1 { >> float: left; >> width: 250px; >> height: 400px; >> background-color: #ccf; >> } >> >> p#p2 { >> float: right; >> width: 250px; >> height: 400px; >> background-color: #cfc; >> } >> >> >> #bar1 { >> float: left; >> width: 200px; >> height: 100px; >> background: #eee; >> } >> >> >> #bar2 { >> float: right; >> width: 200px; >> height: 100px; >> background: #eee; >> } >> >> >> >> Gracias. >> _______________________________________________ >> Lista de distribución Ovillo >> Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org >> 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 Ovillo@lists.ovillo.org > 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 Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo
