[Ovillo] Problema en Opera con overflow: hidden

Tue, 10 Feb 2009 17:42:39 -0800 

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">
  &lt;div id="bar1">
</div>

<div id="bar2">
  &lt;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 [email protected]
Puedes modificar tus datos o desuscribirte en la siguiente dirección: 
http://lists.ovillo.org/mailman/listinfo/ovillo

Responder a