Imagenes que se desbordan

[Sintak]

Buenas

Con este codigo, la capa "contenedora" no ajusta su anchura y su altura a la imagen, de manera que esta queda fuera y no dentro del cuadro:

Código HTML:

<div class="contenidoc">
       <div class="caratula">
            <a href="www.google.es"><img src="imagen.jpg" width="500px" height="350px" alt="caratula" /></a>
        </div>
 
</div>
 

Código CSS:

.contenidoc{
  position:relative;
    width:100%;
    height:auto;
    border:0;
  background:url(images/bg.png) repeat-y top left; 
  background-attachment: scroll;
  background: #1e1e1e;
  overflow: auto;
}
 
.contenidoc img{
    border:0;
}
 
.caratula {
  position:relative;
  float:left;
    width: 500px;
    height: 350px;
    top: 7px;
    left: 7px;
    border:1px;
    -webkit-box-shadow: 2px 2px 5px #999;
  -moz-box-shadow: 2px 2px 5px #999;
    }
 
.caratula a {
  opacity: .70;
  -moz-opacity: .70;
  filter: alpha(opacity=70);
}
 
.caratula a:hover {
  opacity: 1.0;
  -moz-opacity: 1.0;
  filter: alpha(opacity=100);
}
 

que falla?

EDITO: tampoco se ve la imagen de fondo de "contenidoc"