Floating DIV over BorderLayout

[Twain]

I have a BorderLayout composed by 3 regions: north, west and center. West and center regions are iframes.

The center region is used to load differents grids that show master records. When I click on a record a floating div arise in the middle of the grid showing the detail of the selected master record (see pic_1.jpg).
My problem occurs when the west panel is not collapsed. If I click on a the master record the floating div is partially showed behind the west region (see pic_2.jpg).
I tried set differents z-index, change the adding order of the content panels to the border layout, using shim, not using shim.
Does anybody know how could I put the floating div in the front?

This is the javascript code of the Border Layout:



// create the main layout
layout = new Ext.BorderLayout(document.body, {
north: {
split:false,
initialSize: 70,
titlebar: false
},
west: {
split:true,
initialSize: 290,
minSize: 290,
maxSize: 400,
titlebar: true,
closeOnTab: false,
collapsible: true,
collapsed:true,
animate: false,
useShim:true,
title: filtersPanel,
showPin: true,
hidden: false,
floatable: false,
cmargins: {top:2,bottom:2,right:2,left:2}
},
center: {
titlebar: false,
autoScroll:false,
tabPosition: 'top',
closeOnTab: false,
alwaysShowTabs: false,
resizeTabs: true,
useShim: true
}
});
layout.beginUpdate();
layout.add('north', new Ext.ContentPanel('header'));

layout.add('west', new Ext.ContentPanel('classes', {title: filtersPanel, fitToFrame:true}));
center = layout.getRegion('center');
center.add(new Ext.ContentPanel('principal', {fitToFrame:true}));

layout.restoreState();
layout.endUpdate();


Html code:



<div id="classes" class="x-box-mc">
<iframe name="filters" id="left" src="SelecFilters.aspx" style="overflow:auto;" frameborder="0" height="100%" width="100%" class="iframe"></iframe>
</div>

<div id="principal">
<iframe name="ppal" id="main" src="Principal.aspx" scrolling="auto" frameborder="0" height="100%" width="100%" class="iframe"></iframe>
</div>


Maybe one possible solution (not sure) will be define the div outside the iframe in the same page that I define the border layout. I don

[RWaters]

The problem is because of your iframes. If you are inside an iFrame in your center region and pop up a div on top of things it is phyiscally inside that iFrame and cannot extend outside of it. Perhaps you can go up a level and create the div inside the iFrame's parent? This would require that Ext be loaded inside the parent window.

[Twain]

I think you