colocar div fuera de su contenedor
 

Hola,
estoy intentando colocar un div con una imagen de fondo (140pxX140px) fuera de su div contenedor, lo he intentado de diversas formas pero no consigo hacerlo. El efecto que busco es algo asi:

**********************************************
* contenedor *
* ******
* * otro *
* * *
* ******
* *
**********************************************

el codigo que uso es el siguiente:

div#contenedor {
margin: auto;
width: 900px;
height: 550px;
text-align: left;
z-index:1;
}
div#anunciate {
background-image: url(img/inserta.gif);
background-repeat: no-repeat;
background-position: center center;
position: relative;
top: 220px;
left: 810px;
width: 90px;
height: 140px;
overflow: visible;
z-index:50;
}

El caso es que antes de utilizar el div#anunciate, el div#general aparecia con unos 20px desde el top, cuando le pongo el div#anunciate salen unos 300px desde el top, y ademas no me respeta los 900px de ancho del div#general sino que los incrementa.

¿Como puedo hacerlo?

Gracias y un saludo

Re: colocar div fuera de su contenedor
 

Yo creo que es porque en el div #anunciate tienes puesta la posición relativa, y le estás diciendo que se aleje 220px de arriba y 810px de la izquierda, lo que fuerza a que su contendor crezca para albergarlo.

position: relative;
top: 220px;
left: 810px;

No sé realmente qué es lo que quieres hacer, pero al menos si lo pones en posición absoluta

position: absolute;

el contenedor quedará liberado de él.

Mikel.

Re: colocar div fuera de su contenedor
 

Gracias Mikmoro, efectivamente eso es lo que esta pasando, y lo que necesito saber es como hacer para que el div contenedor no crezca.

Re: colocar div fuera de su contenedor
 

No lo veo claro. ¿Como es el div #general? Pon su código y el html para ver mejor.

Mikel.

Re: colocar div fuera de su contenedor
 

Finalmente lo he resuelto de la siguiente forma:

div#general {
margin: auto;
width: 900px;
height: 550px;
text-align: left;
}
div#anunciate {
background-image: url(img/inserta.gif);
background-repeat: no-repeat;
background-position: center center;
position: relative;
top: -490px;
_top: 0px;
left: 60px;
_left: -80px;
width: 140px;
height: 140px;
float: right;
clear: both;
}

Gracias de todos modos por tu ayuda