Foros del Web - Ver Mensaje Individual

kseso? · #3 (**permalink**) 15/06/2009, 06:30

Hola Alfil123

Los elementos flotados no hacen crecer a su contenedor, por lo tanto tienes que añadir un "overflow: auto /o/ hidden"

En tu css tienes "contenedor_texto02{..." (supongo que ha sido despiste que no le preceda el . (punto) y en el html como "<div id="contenedor_texto">" (no puede ser un id porque estás usándolo varias veces y no hay concordancia con el css).
Así mismo, tienes la etiqueta img sin cerrar.

Me permito rehacer tu código, a ver si es eso lo que pretendes.
Entre otras cosas, la clase imgleft se la aplico a las imágenes, no a los párrafos.

Código html:

Ver original<!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" lang="es-es">
<head>
<title>play sobre imagen</title>
<style type="text/css">
* {margin:0; padding:0; position: relative;}
body {background: #063;}
#contenedor {width:850px;
margin: 0 auto;
background: #0c9;
overflow:hidden;
}
.contenedor_texto{
width: 600px;
overflow:hidden;
background: #fff;
margin-bottom: 10px;
}
.contenedor_texto_sin_overf {
width: 600px;
border: 1px solid #900;
background: #cdcdcd;
margin-bottom: 10px;
}
.imgleft {
float : left;
padding : 5px;
border : 1px solid #aaa;
margin: 1px;
margin-right : 10px;
}
</style>
</head>
<body>
<div id="contenedor">
<div class="contenedor_texto">
<p><img class="imgleft" src="http://static.forosdelweb.com/fdwtheme/logo-reflejo.png" width="360" height="320" />
Este es el primer bloque de texto con una imagen a su izquierda, mayor que el texto
</p>
</div>
<div class="contenedor_texto">
<p><img class="imgleft" src="http://static.forosdelweb.com/fdwtheme/logo-reflejo.png" width="360" height="20px" />
Este es el segundo párrafo, pero con una imagen menos alta que la enterior y texto suficiente como para que ocupe mayor altura que la imagen. Verás cómo el texto fluye y se adapta a la imagen
</p>
</div>
<div class="contenedor_texto_sin_overf">
<p><img class="imgleft" src="http://static.forosdelweb.com/fdwtheme/logo-reflejo.png" width="360" height="320" />
contenedor sin la propiedad overflow, con una imagen grande y poco texto, con su fondo gris y un borde rojo para que veas la diferencia con el primero</p>
</div>
</div>
</body>
</html>