problema con div de jquery

[asesino22000]

estoy haciendo una pagina la cual tiene una barra del tamaña de la pagina al 100% y se ajusta automáticamente a cualquier resolución de pantalla debajo de esta celda tengo otra la cual tiene un div q sale con un efecto de jquery al presionar el un botón todo esta perfecto el problema es cuando la pongo la propiedad (position:absolute o fixed) esta propiedad la pongo por q quiero q el div salga encima de lo q ahi debajo y no se mueva nada

todo lo hace bien el problema q tengo es con el tamaño cuando pongo esas propiedades el div se hace muy ancho y se pasa de la resolución lo cual ya se ve feo

lo q quiero hacer es q el div se quede al tamaño de la celda q lo contiene alguien me podría ayudar me estoy volviendo loco con esto

[hades87]

Si pones position:absolut toma como referéncia su contenedor padre por lo que sale de lo demás que esta en position relative.

No me ha quedado muy claro que quieres hacer, algun link o imagen?

[asesino22000]

Cuando pongo position relative si me respeta el tamaño pero al aparecer la tabla me baja todas las demas tablas lo q quiero es q aparesca ensima de todas sin mover nada y q me respete el tamaño les pongo algo del codigo para ver si me entienden mas

<table border="0" cellspacing="0" cellpadding="0" width="100%">
<tr>
<td colspan="4">
<table border="0" cellspacing="0" cellpadding="0" width="989">
</table>
</td>
</tr>
<tr>
<td align="center" width="167" height="24" background="imgMarkeTienda/imgMarke_55.jpg" class="tdcen">
<table border="0" cellspacing="0" cellpadding="0" width="167">
</table><a href="#">
<font color="#FFFFFF"><b>Todos los departamentos&nbsp;<img src="imgMarkeTienda/boton_descubre.png" border="0" align="middle" /></b></font></a>
</td>
<td width="7" style="color:#FFFFFF">&nbsp;

</td>
<td align="center" width="1560" background="imgMarkeTienda/imgMarke_55.jpg" class="tdcen" style="padding-left:20px; padding-right:20px;">
<table border="0" cellspacing="0" cellpadding="0" width="700">
</table>
<img src="imgMarkeTienda/botonesBarraRoja.png" border="0" align="left" />
<font color="#FFFFFF">
<b>Este Año Marke y Bancomer te conceden todos tus deseos</b>
</font>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nb sp;
<a href="javascript:animatedcollapse.toggle('despleg' )" style="text-decoration:none;">
<font color="#FFFF00"><strong>Descubre Como</strong></font>&nbsp;&nbsp;
<img src="imgMarkeTienda/boton_descubre.png" border="0" align="middle" />&nbsp;
</a>
<img src="imgMarkeTienda/botonesBarraRoja2.png" border="0" align="right" />
</td>
</tr>
<tr>
<td>
</td>
<td style="color:#FFFFFF">
</td>
<td>
<table id="despleg" border="0" cellspacing="0" cellpadding="0" align="center" style="display:none; position:relative; width:100%;">
<tr style="background-color:#C9292E">
<td style="background-color:#C9292E" valign="top">
<strong>Contenido</strong>
</td>
</tr>
</table>
</td>
</tr>
</table>

este es el codigo y la tabla q aparese es la q dice id="despleg" esto abre con jQuery pero ese no es el problema por eso no lo pongo

debajo de esta tabla ahi otras mas y esas son las q quiero q no se mueban cuando aprese esta

esta es la imgen cuando le das al boton de descubre como se sale la tabla



una imagen de como quiero q quede



esto es lo q me hace en el explorador



todas esta img las puse con position relative pero si pongo position absolute se sale de la tabla y de la pantalla quedando muy grande y se ve muy mal

[asesino22000]

alguna idea porfavor ayuda estoy atorado con esto