mi DIV se corta y la imagen sigue

[angelseron]

Buenas paso el link para una mejor explicada

w w w . peruforless.com/bosquejo/packages/special2-explore-the-path-of-the-inca.php


Si se dan cuenta la imagen de las ninas a la derecha sobrepasa cuando el texto que lo acompana es corto (si es largo nomal se acomoda) la caja marron es un div

#cajalink1 {
font-size: 1em;
background-color: #efeee2;
background-image: url(../images/top-caja.gif);
background-repeat: no-repeat;
margin-top: 18px;
margin-bottom: 18px;
padding: 10px 15px 10px 15px;
}

.bor-img-link {
border-style: solid;
border-width: 1px;
border-color: #fff;
float: right;
margin-left: 10px;
margin-top: 7px;
margin-bottom: 7px;
}

y aca va el htm

<div id="cajalink1"><img src="../images/img-special1.jpg" alt="Ninas en Cuzco" class="bor-img-link" />
<p>The Inca Trail gives hiking a whole new
meaning and you do not have to be
an expert in order to enjoy this journey
to the lost city. Many hikers consider
this trail to be the most beautiful
in the world. If you ever felt like
hiking in a heavenly place, this is
your chance and your final destination
- Machu Picchu – is not only breathtaking but awe inspiring.</p>
</div>

Donde la imagen tiene la clase .bor-img-link para el borde fino blanco, queria saber que codigo me falta para que el texto se acomode en caso que sea corto como esta url, osea que el fondo marron siga 7px mas abajo de la imagen.

gracias.

[fearlex]

Agregale el height = 150px y te saldra bien tanto en IE como en FF, pruebalo y dinos.

#cajalink1 {
font-size: 1em;
background-color: #efeee2;
background-image: url(../images/top-caja.gif);
background-repeat: no-repeat;
margin-top: 18px;
margin-bottom: 18px;
padding: 10px 15px 10px 15px;
height: 150px;
}

[angelseron]

hola man gracias pror esponderme recien entro ver el mensaje jutos eso tb hice lo de poner una altura pero solo hace efecto en IE pero en Firefox se sigue cortando.

#cajalink1 {
font-size: 1em;
background-color: #efeee2;
background-image: url(../images/top-caja.gif);
background-repeat: no-repeat;
margin-top: 18px;
margin-bottom: 18px;
padding: 10px 15px 10px 15px;
height: 150px;
}

.bor-img-link {
border-style: solid;
border-width: 1px;
border-color: #fff;
float: right;
margin-left: 10px;
margin-top: 7px;
margin-bottom: 7px;
}

---------------------

<div id="cajalink1"><img src="../images/img-special1.jpg" alt="Ninas en Cuzco" class="bor-img-link" /><p>puro texto.</p></div>

Alli te mando el ejemplo

w w w . peruforless.com/bosquejo/packages/special1-heart-of-the-inca.php

en IE se ve bien pero en Firefox no, si nos damos cuenta abajo el texto de la caja se escapa.

Gracias nuevamente man.

[angelseron]

Nose olviden de mi, gracias

[kahlito]

Hola angelseron, no veo la diferencia ¿has hecho los cambios? o quizás es que no se donde está el error

[angelseron]

Hola man gracias por repsonder, claro aumente el height: 150px; en al siguiente #cajalink1 { , funciona en IE pero en Firefox nada, te muestro el link w w w . peruforless.com/bosquejo/packages/special1-heart-of-the-inca.php, como veras en Firefox la parte de la caja derecha donde esta la imagen de las niñas, el texto de su costado se desborda, pero la idea noes poner una altura grande, porque hay textos en otras paginas de mi web donde es mas corto el texto entonces el height con altura en eso casos se veria muy alto, espero me puedan ayudar.

gracias.

[kahlito]

Hola de nuevo angelseron.

Ahora si lo he visto , y creo que podrias arreglarlo de dos maneras dependiendo de lo que quieras hacer.

Si por ahora solo quieres arreglar ese desbordamiento para ese contenido en concreto metiendo solo un desbordamiento automatico (overflow:auto) en tu css te irá bien. Como verás tampoco hace falta darle altura.

Código:

#cajalink1 {
font-size: 1em;
background-color: #efeee2;
background-image: url(../images/top-caja.gif);
background-repeat: no-repeat;
margin-top: 18px;
margin-bottom: 18px;
padding: 10px 15px 10px 15px;
overflow:auto;
}

Luego si más adelante vas a modificar ese contenido, te podria dar problemas en Iexplorer al ser el texto más pequeño que la imagen, siendo ahora esta la que desbordaria y se quedaria fuera, y entonces tendrias que darle una altura para que Iexplorer la coja, como por ejemplo así:

Código:

#cajalink1 {
font-size: 1em;
background-color: #efeee2;
background-image: url(../images/top-caja.gif);
background-repeat: no-repeat;
margin-top: 18px;
margin-bottom: 18px;
padding: 10px 15px 10px 15px;
overflow:auto;
}
* html #cajalink1 {
font-size: 1em;
background-color: #efeee2;
background-image: url(../images/top-caja.gif);
background-repeat: no-repeat;
margin-top: 18px;
margin-bottom: 18px;
padding: 10px 15px 10px 15px;
height:200px;
}

Pero por ahora este segundo ejemplo no te hace falta, con el primero te irá bien