Problema al agrandar div en IE6

[exxqizofrenicoo]

Hola les cuento justo hoy se me dio por probar unas cosas que estoy poniendo en mi sitio y me encontre con un fallo bastante feo en ie6.
Les dejo un link para que lo puedan comprobar ustedes mismos:

http://www.spedevigner.com/cake/Noticias/view/17

Fijense en el segundo cuadro de codigo como funcion en firefox y como funciona en ie6.
van a ver que en ie6 cuando agrando el div este me estira toda la estructura.

les dejo parte de los codigos.

CSS

Código PHP:

  .muestraCod{background-color:#D0ECEE;border:1px solid #BACED2;opacity: .5;width:520px;padding:10px;overflow-x:auto;overflow-y:hidden;position:relative;/* redondea las esquinas (como prefieras) */-moz-border-radius: 12px;-webkit-border-radius: 12px;}     
.muestraCod:hover{opacity: 1;}     
.contenidoCod{width:auto;white-space:nowrap;}  
   

HTML

Código PHP:

  <div class='muestraCod'> 
<div class='contenidoCod'>Contenido Codigo</div> 
</div>  
   

JQUERY

Código PHP:

  $(".muestraCod").hover(function(){ 
                if($(this).find(".contenidoCod").width() > 520){ 
                    //saco una ecuacion para calcular y centrar el div 
                    if(($(this).find(".contenidoCod").width()+10) > 770){ 
                        codeLeft = (($(this).find(".contenidoCod").width()+10) - 770) / 2; 
                    }else{ 
                        codeLeft = 0;     
                    } 
                    //elimino cualquier otra animacion que haya en cola de espera 
                    $(this).clearQueue(); 
                    $(this).animate({ 
                        width: $(this).find(".contenidoCod").width()+10, 
                        height: $(this).find(".contenidoCod").height(), 
                        left: -codeLeft, 
                        overflow: 'hidden', 
                        opacity: 1 
                    }, 
                    {duration: 1000, easing: 'easeOutBounce'}); 
                     
                }             
            },function(){ 
                if($(this).find(".contenidoCod").width() > 520){                 
                    $(this).animate({ 
                        width: 520, 
                        height: $(this).find(".contenidoCod").height(), 
                        left: 0, 
                        overflow: 'hidden', 
                        opacity: .5 
                    }, 
                    {duration: 1000, easing: 'easeOutBounce'}); 
                } 
            });  
   

bueno lo que hago es simple con jquery al hacer hover sobre el div de codigo este se agranda hasta mostrar todo su contenido.
Quiero saber si alguien tiene alguna solucion para esto, lo raro de este problema es que parece que el que se comporta bien es ie6 ya que esta bien que choquen divs absolutos unos con otros.

[exxqizofrenicoo]

bueno despues de 2 horas tratando y tratando pude dar con la solucion.
Cree un tercer div padre de los 2 anteriores el cual es static, ademas el segundo div tambien lo pase a absoluto con jquery y ademas le di la altura del primer div a los otros 2.
Si alguien le gusta el efecto se lo paso.
Saludos