problema con contenido e imagen

[rafret]

Hola nuevamente al foro y antes que nada agradecer mucho por la ayuda no sé qué haría si no existiera...renunciar noooooo


El tema es que estoy haciendo esta web; la imagen de la foto la parte de abajo
y el degradado vertical que hace como espacio entre los dos bloques se sale por debajo o es que la foto no logra bajar del todo y si le pongo fondo blanco al div sobresale una parte blanca debajo


este es el codigo

<!-- CONTENIDO-->






<div id="contenido" class="limpiar">
<div id="jofret">
<div id="izquierda">

<h1 class="bienvenida"><span class="titulo">Bienvenidos</span></h1>
<p class=bienvenida>Unimax Peru S.A. les da la bienvenida a nuestra página web. Aquí les presentamos el perfil de nuestra compañia y nuestros productos esperando que les sirva de ayuda y puedan encontar los requerimientos que soliciten. Esperamos que se pongan en contacto con nosotros. Inmediatamente responderemos sus inquietudes.
Contáctenos <a class="contactenosaqui" href="#">aquí</a>.
<span class="gerente"><strong>Unimax Perú S.A.</strong></span><span class="bloque">La Gerencia</span></p>



</div>
</div><!--final de backgroundleft-->
<div id="derecha">
<div id="contenidoderecha">
<p id="foto"><img src="http://grapsaco.com/jofret/imagenescabecera/fotoportada.jpg" width="662" height= "417" />
</p>
</div>




</div>


</div><!--cierre de contenido-->

estilos:

/*AQUI CONTENIDO*/



div#jofret{
background:white;
width:230px;
border-right:2px solid #640077;
float:left;
}

div#izquierda{
background:#FFF repeat-x left top;


}

h1.bienvenida{
margin-top:20px;
background:#8F8166;
line-height:50px;
border-bottom:1px solid #666;
color:white;
padding:0 20px 0 60px;
font-size:22px;
font-family: Georgia, "Times New Roman", Times, serif;
font-style:italic;
}

p.bienvenida{
background:url(../images/degradeparrafo.png) repeat-y top center;
margin:0px 0 5px 0 3px;
padding:15px 18px 39px 20px;
font-family: Georgia;
color: #444;
text-decoration: none;
word-spacing: normal;
letter-spacing: 0;
line-height: 1.2em;
font-size:0.7em;
text-align:center;
line-height:20px}


span.gerente{
display:block;
margin-top:20px;
line-height:14px;
}


span.bloque{
display:block;}

a.contactenosaqui{
color:#F00;
text-decoration:underline;}

a:hover.contactenosaqui{
color:#6CF;
text-decoration:none;}



/*HASTA AQUI DIV IZQUIERDA*/




/*DIV Foto*/

div#derecha{
float:left;/* background:#FFF;*/

}

div#contenidoderecha{
background: url(../images/degradadovertical.png) repeat-y left top;
padding-left:5px;
}


p#foto{ padding-bottom:0px;
}






/*******footer*************/

esto pasa cuando alejo la imagen en el navegador






otra cosa el div que es div#contenidoderecha de la foto esta en otro div dentro de div#derecha que es el div que tiene el float left bueno a la foto la meti dentro de un <p> para darle text-align:right pero no me funcionó solamente me funciona si le quito a div#derecha el float left.?
Bueno espero haya alguien con paciencia por ahi¿

[Shaito]

Hola

El problema es sencillo, la sidebar, sobresale un poco más que la div de la imagen.

SOLUCIÓN 1: Un div que contenga ambos, tanto la sidebar como el div de la imagen han de tener height:100%;

SOLUCIÓN 2: Aplicar un padding-bottom al div de la imagen, de este modo alargas el div solo por la parte inferior.


Por cierto, las imágenes del final no se ven, usa un servidor como JackImages.tk


Saludos, alguna duda, comenta

[rafret]

ok
Paero la imagen y el degradado oscuro estan en el mismo div derecho

subire las imagenes nuevamente

[Shaito]

Se me ocurre una nueva solución:

La imagen añade: Margin-top:Xpx cuantos sean necesarios:

<img src="http://grapsaco.com/jofret/imagenescabecera/fotoportada.jpg" width="662" height= "417" style="margin-top:00px" />

Si eso no te funciona, en la línea de css añade esto:

div#contenidoderecha{
background: url(../images/degradadovertical.png) repeat-y left top;
padding-left:5px;
padding-bottom:0px;
margin-bottom:0px;
}


Saludos

[rafret]

Hola en contre la solucion pero no fue para nada satisfactoria
Tal vez alguien me pueda dar una mano:

en el div#contenidoderecha puse el estilo:
background: url(../images/degradadovertical.png) repeat-y left top;

pero al poner este estilo sobresale una punta hacia abajo que desalinea a la fotoy me deja un espacio feo (la pueden ver en la primera foto parte baja de la foto) .
Bueno la solución por la que tuve que optar fue quitar finalmente el degradado vertical y ponerle un border de 2 px solido negro.
Alguien me puede decir que es lo que esta mal porque sale esa punta primera vez que me pasa. Anteriormente había hecho el efecto sin problema ahora no se que pasa por mas que intento no lo pude arreglar