box que no encierra su contenido

CID@Devs · #1 (**permalink**) 16/04/2006, 08:26

Hola!!
Tengo un problemita...
Tengo una cajita que dentro contiene imagenes y texto, y queria que el texto quede a los margenes de la imagen. Por lo que toque los float's de la imagen.
Ahora bien, logro el efecto deseado, pero ahora la caja no encierra todo el contenido.

Mi html:

Código:

<div class="box">
              <div class="boxtitle">
                <p>Mi cajita</p>
              </div>
              <div class="boxcontent">
                <img src="css/winxp_beta2_wmp8full.gif" style="float:left; padding-right:12px;" height="100" >
                <p>Esto es poco contenido y la imagen tiene mayor heigth, por lo que la imagen queda fuera de la cajita provocando un efecto... no deseado.</p>
              </div>
            </div>

Mi css en cuestion:

Código:

.box {
	border: 1px solid #000;	
	margin: 0px 0px 8px 0px;
}

.boxtitle{
	color: #FFF;
	background: #000;	
	padding: 4px;
	font-weight: bold;
}

.boxcontent{
	padding: 12px;	
}

Por favor, cualquier aporte es de mucha ayuda.
Gracias.

webosiris · #2 (**permalink**) 16/04/2006, 09:21

se debería solucionar (no lo probé) agregando justo antes de donde termina la caja
<br style="clear:both" />

CID@Devs · #3 (**permalink**) 16/04/2006, 10:03

Código:

<div class="box">
              <div class="boxtitle">
                <p>Mi cajita</p>
              </div>
              <div class="boxcontent">
                <img src="css/winxp_beta2_wmp8full.gif" style="float:left; padding-right:12px;" height="100" >
                <p>Esto es poco contenido y la imagen tiene mayor heigth, por lo que la imagen queda fuera de la cajita provocando un efecto... no deseado.</p>
                <br style="clear:both;" />
              </div>
            </div>

Muchisimas gracias!!
Solo hay un detalle.
Si la imagen tiene mayor altura que el texto, poner esa correccion lo deja perfecto. Pero si la imagen tiene menor altura o simplemente no hay imagen, aumenta el alto de la caja sin sentido, dejando una terminacion que no me gusta.
Habrá alguna forma de compensar las dos situaciones?

EDITADO: Lo acabo de probar en IE y no funciona. Solo funciona bien en Firefox.

CID@Devs · #4 (**permalink**) 17/04/2006, 06:42

Alguna otra idea por favor?

CID@Devs · #5 (**permalink**) 17/04/2006, 08:18

Ya lo solucioné