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
