Problema con DIV

[juanfelice7]

Hola a todos, tengo un problema.
Tengo un DIV que quiero ubicar dentro de otro DIV y a la vez encima de una imagen (que también se encuentra en el div). Hasta ahí todo bien, logro ubicarlo, pero el tema es que abajo queda un espacio vacío que es donde iría en div en realidad. Paso a mostrarles con imágenes.

En esta foto pueden ver como me queda, se ve todo bien, pero más abajo queda espacio vacío (cerán que la barra de desplazamiento permite ir hacia abajo donde hay solo espacio vacio):



Si deshabilito en mi CSS el "bottom: 303px" verán que ahí descubro que ese espacio vacío es culpa del DIv, que en su posición original ocupa ese espacio:



¿Alguna solución para que este espacio desaparezca? Dejo aquí el código

HTML:

Código HTML:

<div class="noticia_principal">
	<img class="foto" src="1.jpg" width="700" height="410" />
	<div class="op"></div>
</div> 

CSS:

Código HTML:

		.noticia_principal	{
				text-align: center;
				margin: 0 auto;
				width: 700px;
				height: 410px;
				}
		.op	{
				background-color: black;
				height: 303px;
				width: 335px;
				opacity: 0.6;	/* Opacidad para Firefox */
				filter: alpha(opacity=50);	/* Opacidad para IE */
				position: relative;
				left: 40px;
				bottom: 303px;
				}
		.foto	{
				position: relative;
				top: 0px;
				left: 0px;
				}

Desde ya muchas gracias.

[canino_latino]

coloca tu css asi:

Código CSS:

.noticia_principal  {
                text-align: center;
                margin: 0 auto;
                width: 700px;
                height: 410px;
                overflow: hidden;
                }
        .op {
                background-color: black;
                height: 303px;
                width: 335px;
                opacity: 0.6;   /* Opacidad para Firefox */
                filter: alpha(opacity=50);  /* Opacidad para IE */
                position: relative;
                left: 40px;
                bottom: 303px;
                }
        .foto   {
                position: relative;
                top: 0px;
                left: 0px;
                }
 

esta parte es la que hace todo:

Código CSS:

overflow: hidden;
 

Chao espero te sirva.