float para imagenes

helter_skelter · #1 (**permalink**) 14/09/2009, 09:50

Buenos dias Tengo un problemon,
Dentro de un div, tengo mi texto pero quiero agregarle una imagen flotante al lado derecho, en mi css pongo:

.flrgt {float:right; padding: 5px;}

cuando lo aplico a mi imagen, el texto en vez de bordear toda la imagen simplemente se va de corrido como si fuera una columna, esto me pasa en IE6 porque en IE7 y FF se ve bien.

Alguien podria darme una solucion, por favor.

mayid · #2 (**permalink**) 14/09/2009, 09:57

Le tendrías que dar tambien un clear.

Siempre los confundo, pero creo es que clear: none . La otra es clear:both;

kseso? · #3 (**permalink**) 14/09/2009, 16:03

Algo debes estar haciendo mal, helter, pues si aplicas una clase a la imagen donde está definido float, se debería posicionar correctamente en su lado y el texto fluir a su lado y por debajo.
Mira lo siguiente. De la clase .derecha lo significativo es el float (el resto es adorno). Y El cómo se aplica a la imagen: ~~<img class="derecha" src="http://www.forosdelweb.com/f53/float-para-imagenes-735477/... ~~ que posiblemente sea donde tengas algún error de dedo.

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" lang="es-es">
<head>
<title>Kseso? jugando con css</title>
<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1" />
<style type="text/css">
* {margin: 0; padding:0; outline: none; border: 0;}
body {
    background-color: #444;
    margin:20px;
}
#contenedor {
  position: relative;
  width: 40%;
  margin: 0 auto;
  clear: both;
  background: #F5F7F9;
  border-bottom:1px solid #A5A7AA;
  border-right:1px solid #A5A7AA;
  overflow: auto;
  padding: 10px;
}
#contenedor p {
  font-size: 1em;
  font-family: monospace;
  text-align: justify;
}
.derecha {
  background: #DFDFDF;
  float: right;
  margin: 0 0 0 10px;
  border: 1px solid #CDCDCD;
  padding: 3px;
}
</style>
</head>
 
<body>
<div id="contenedor">
<img class="derecha" src="http://img299.imageshack.us/img299/9726/96830574.jpg" alt="jardín" />
<p>Todo el texto que quieras que se muestre junto a la imagen.</p>
<p>Lorem ipsum dolor sit amet consectetuer amet interdum metus netus interdum. Maecenas consectetuer urna id tempus orci justo interdum convallis et egestas. Lobortis gravida Quisque Nam tellus Curabitur Phasellus Nam neque pretium gravida. Malesuada neque.</p>
<p>Todo el texto que quieras que se muestre junto a la imagen. Lorem ipsum dolor sit amet consectetuer amet interdum metus netus interdum. Maecenas consectetuer urna id tempus orci justo interdum convallis et egestas. Lobortis gravida Quisque Nam tellus Curabitur Phasellus Nam neque pretium gravida. Malesuada neque.</p>
</div>
</body>

Un saludo