Hello guys,

I wrote a Panel with custom creation of sup div, but when i want to make some animation with some div, the css change that broke completely the disposition of the floated block, the function set a new div with relative position with the top:0 and left:auto, i try to set the propery float:left on the div created but no such property on the slideOut(pos,config) method, there is still the callback function but i need this property during the whole time of the animation.

I'm completely stuck here, is this possible to simulate the float property css with just position relative and top, left setters ?

Here my code :

Code:
  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <head>
        <title>My Panel</title>
        <!-- Extjs depedencies files -->
        <link rel="stylesheet" type="text/css" href="css/ext-all.css" rel="stylesheet" />
        <script type="text/javascript" src="js/ext-base-debug.js"></script>
        <script type="text/javascript" src="js/ext-all-debug.js"></script>
    </head>
        <style type="text/css">
            
              .x-columns {
                float:left;
                height: 54px;
                padding: 0;
                margin: 0;
                width : 198px;
                text-align:center;
                border-right: solid 1px #3399bb;
                border-bottom: solid 1px #3399bb;
            }
            .x-left-container{
                float:left;
                overflow: hidden;
            }
            
            .process-container{
                overflow-x: scroll;
                overflow-y :hidden;
        padding-bottom:15px;
            }
            
            .myxtree {
                border:none;
                font-size:12px;
                font:normal 12px/18px Arial,Helvetica,sans-serif; color:#5C5C5C
            }

            .x-people-header {
                height:36px;
                text-align:center;
                background-color:#E1EAF4;
                position:relative;
                color: #FF7E00;
                font-size: 12px;
                font-weight: bold;
                width:100%;
                z-index: 1;
            }

            .x-header-process{
                background-color:#E1EAF4;
                height:36px;
                float:left;
                margin: 0;
                width : 199px;
                text-align:center;
                font-weight: bold;
            }
            
            .embark-container{
                float:left;
                margin: 0;
                text-align: center;
                height:48px;
                width: 994px;
                background-color: #8D9E9C;
                color: white;
                font-size: 14px;
                z-index: 0;
            }

            .x-empty-header{
                height:48px;
                 width:100%;
                 position:relative;
                background-color: #8D9E9C;
                z-index: 1;
            }


            .accomplishment-container{
                float:left;
                text-align: center;
                height:48px;
                margin: 0;
                width: 597px;
                background-color: buttonface;
                z-index: 0;
            }

            .process-line{
                width:1600px;
                height:49px;
            }

            .process-line-header {
                width:1600px;
                height:48px;
                position: relative;
            }
            
            .x-people-process {
                height: 30px;
            }

            .dataline {
                margin-bottom: 1px;
            }
            
            .clear-both {
                clear:both;
            }
        </style>
    <script type="text/javascript">
        
         Ext.onReady(function(){
             
             new Ext.Panel({
             width : 820,
             processCt:{},
             renderTo:Ext.getBody(),
             padding: '50px',
             columns : [
            {title:'process 1',cls:'x-header-pdco',pid:'P5', id:1},
            {title:'process 2',cls:'x-header-orcp', pid:'P4',id:2},
            {title:'process 3', cls:'x-header-clg',pid:'P1', id:3},
            {title:'process 4', cls:'x-header-bt',pid:'P4', id:4},
            {title:'procss  5', cls:'x-header-acr', pid:'P4',id:5},
            {title:'process 6',cls:'x-header-pdcr',pid:'P6', id:6},
            {title:'process 7',cls:'x-header-prate', pid:'P2',id:7},
            {title:'process 8', cls:'x-header-vpp', pid:'P3',id:8}],
            onRender : function(ct, position){
            var p = this;
            this.addEvents('testready');
            Ext.Panel.superclass.onRender.call(this, ct, position);
            this.el.addClass('x-tree');
            
            
            var leftCt = this.leftCt = this.el.createChild({
                cls:'x-left-container '
            });
            
            this.addListener('testready', function(e){
               var el = Ext.select('div[process=MPRCS00005]');
               el.slideOut('l', {duration:360});
               
            });
            
            //create people header process
            var emptyCt = leftCt.createChild({
                cls:'x-empty-header ', 
                html:''
            });
            
            //create people header process
            var peopleHeader = leftCt.createChild({
                cls:'x-people-header ', 
                html:'my panel'
            });
            
            this.innerCt = leftCt.createChild({
                tag:'ul',
                cls:'x-tree-root-ct ' +
                (this.useArrows ? 'x-tree-arrows' : this.lines ? 'x-tree-lines' : 'x-tree-no-lines')
            });

            var processCt = this.processCt = this.el.createChild({
                cls:'process-container '
            });
            
            var processLineSum = this.processLineSum = this.processCt.createChild({
                cls: 'process-line-header'
            });
            // create custom header embarck and accomplishment
           processLineSum.createChild({
                cls : 'embark-container',
                html:'Embark'
            });
            
            processLineSum.createChild({
                cls : 'accomplishment-container',
                html:'Accomplishment'
            });
            
            processLineSum.createChild({
                cls : 'clear-div'
            });
            
           var processLine = this.processLine =  this.processCt.createChild({
                cls: 'process-line-header x-people-process'
                
            });
            
            // insert common headers
            Ext.each(this.columns,function(t){
                var header = p.processLine.createChild({
                    cls:t.cls,
                    process: t.pid,
                    html:t.title + "<div>05/11/2012</div>"
                }).addClass('x-header-process');
                
               
            });
            
            //jeux de tests
            this.innerCt.createChild({
                tag:'li',
                cls:'x-li',
                style:'height:55px;width:120px;border:solid 1px black;',
                html:'test'
            });
            
            var l =this.processCt.createChild({
                 tag: 'div',
                 cls: 'process-line dataline',
            });
            
            Ext.each(this.columns, function(t){
               l.createChild({
                  cls:'x-columns '+((p.columns.length == t.id)?'x-last-cell':''),
                  html:'test',
                  process:t.pid
               }) ;
            });
            this.fireEvent('testready');
           
        }
     });
     });
    
    </script>
<body>
</body>
</html>