Foros del Web » Creando para Internet » CSS »

box que no encierra su contenido

Estas en el tema de box que no encierra su contenido en el foro de CSS en Foros del Web. 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. ...
  #1 (permalink)  
Antiguo 16/04/2006, 09:26
 
Fecha de Ingreso: marzo-2006
Mensajes: 41
Antigüedad: 11 años, 8 meses
Puntos: 0
Exclamación box que no encierra su contenido

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.
  #2 (permalink)  
Antiguo 16/04/2006, 10:21
Avatar de webosiris
Moderador egiptólogo
 
Fecha de Ingreso: febrero-2002
Ubicación: Luxor, Egipto
Mensajes: 10.727
Antigüedad: 15 años, 9 meses
Puntos: 997
se debería solucionar (no lo probé) agregando justo antes de donde termina la caja
<br style="clear:both" />
__________________
Pasamos tus PSD a HTML

Pobre del que lo sabe todo, porque no tiene nada más que aprender ni razón para vivir. -
  #3 (permalink)  
Antiguo 16/04/2006, 11:03
 
Fecha de Ingreso: marzo-2006
Mensajes: 41
Antigüedad: 11 años, 8 meses
Puntos: 0
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.

Última edición por [email protected]; 16/04/2006 a las 11:21
  #4 (permalink)  
Antiguo 17/04/2006, 07:42
 
Fecha de Ingreso: marzo-2006
Mensajes: 41
Antigüedad: 11 años, 8 meses
Puntos: 0
Alguna otra idea por favor?
  #5 (permalink)  
Antiguo 17/04/2006, 09:18
 
Fecha de Ingreso: marzo-2006
Mensajes: 41
Antigüedad: 11 años, 8 meses
Puntos: 0
Ya lo solucioné
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 04:36.