Estou com problemas para posicionar uma div absoluta fora de uma tabela, não sou muito fã do layout da tabela, mas encontrei um projeto existente com o layout da tabela. O código é o seguinte

<td colspan="2" align="right" style="padding-top:3px; padding-right:15px; padding-bottom:15px;" width="600px">
    <table cellpadding="0" cellspacing="0" border="0">
        <tr><td height="37px" width="600px" style="background-image:url('P--IMG--P/welcomepanel/header.png'); background-repeat:no-repeat; background-position:bottom left;"><span class="heading" id="I--heading_text--I" style="padding-top:3px;"></span></td></tr>
        <tr>
            <td align='left' valign='middle' width="600px" height="522px" style="background-image:url('P--IMG--P/welcomepanel/middelblock_repeat.png'); background-repeat: repeat-y; padding-top:0px">
                <div height="500px" width="580px" style="width:600px; text-align:left; height:500px; overflow-y:scroll; overflow-x:none;">
                    [--C--comp--C--]
                </div>
            </td>
        </tr>
        <tr><td><img src="P--IMG--P/welcomepanel/middelblock_roundcorners.png"/></td></tr>
    </table>
</td>

Onde[--C--comp--C--] é a string de substituição para um fckEditor que contém uma imagem dentro de uma div, eu configurei o z-index dessa div para 10, mas ele não deseja sair da tabela .. e sua posição absoluta.

Por favor, deixe-me saber o que posso estar fazendo de errad

Eu percebi que o problema vem com o deslocamento excessivo no contêiner td, se você remover ooverflow-y:scroll ele funciona bem, mas o problema é que eu preciso ter esse estouro, pois há muito conteúdo nesse td. Não sei o que fazer agora. :( .. alguém por favor ajude um irmão!

Eu preciso que o mapa pequeno esteja fora da tabela e o mapa grande permaneça dentro da tabela; ele mostra a imagem pequena quando você passa o mouse no mapa grande usando o Jquery para ampliar, carregado no fckeditor. Eu espero que isso ajude.