Re: [Ovillo] Imagen que desborda un div

[Javier Trejo]

Nacho:

Este es tu código original:

<div id="cuadrogrupoweb">
        <div class="grupoweb">
                <img src="images/noticia_grupoweb.jpg" /> 
                <h4>Título de la noticia</h4> 
                <p>Descripción corta de la noticia</p> 
        </div> 
        <div class="masinfo">M&aacute;s Informaci&oacute;n
        </div> 
</div> 

para que la imagen no desborde te recomiendo el siguiente cambio:

<div id="cuadrogrupoweb">
        <div class="grupoweb">
                <img src="images/noticia_grupoweb.jpg" /> 
                <h4>Título de la noticia</h4> 
                <p>Descripción corta de la noticia</p> 
        </div> 
        <br class="masinfo" />
        <div>M&aacute;s Informaci&oacute;n
        </div> 
</div> 

Fijate que te saqué el class="masinfo" del div y te lo puse en un <br />.
Ojo que el BR lo cerrás con la barra si estás trabajando con xhtml.

Espero te sirva 

Saludos.

-----Mensaje original-----
De: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED]

Enviado el: Miércoles, 11 de Octubre de 2006 08:16
Para: Ovillo, la lista de CSS en castellano
Asunto: [Ovillo] Imagen que desborda un div

Hola a [EMAIL PROTECTED],

En primer lugar tengo que decir que he estado mirando este problema en el
archivo de mensajes de esta lista y aunque hay gente que tuvo este mismo
problema las soluciones que les funcionaron a ellos a mi no me funcionan.
Debo estar obcecado...

La cosa es que tengo una imagen flotada a la izquierda dentro de una capa
que cuando el texto que la acompaña ocupa menos espacio que la altura de la
imagen hace que esta se desborde por encima de la capa.

El código HTML es el siguiente:

<div id="cuadrogrupoweb">
<div class="grupoweb">
<img src="images/noticia_grupoweb.jpg" /> <h4>Título de la noticia</h4>
<p>Descripción corta de la noticia</p> </div> <div
class="masinfo">M&aacute;s Informaci&oacute;n</div> </div>

El código CSS es el siguiente:

.grupoweb {  background-color:#F2FEF2;  border-right:5px solid #006500;
padding:8px;  margin-top:25px; }

.grupoweb h4 {  color:#FFC300;  font-size:1em;  margin:0 0 3px 0; }

.grupoweb p {  color:#666;  font-size:0.85em;  margin:0px;
line-height:1.5em; }

.grupoweb img {  float:left;  display:block;  border:0;  margin:0 3px 3px 0;
}

.masinfo {  clear:both; }


Un saludo,

Nacho
_______________________________________________
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes
modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo

--
No virus found in this incoming message.
Checked by AVG Free Edition.
Version: 7.1.408 / Virus Database: 268.13.2/471 - Release Date: 10/10/2006
 

-- 
No virus found in this outgoing message.
Checked by AVG Free Edition.
Version: 7.1.408 / Virus Database: 268.13.2/471 - Release Date: 10/10/2006
 

_______________________________________________
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección: 
http://lists.ovillo.org/mailman/listinfo/ovillo