Jquery doesn't resize window properly
<p>I managed to make the margins grow smaller and body's width stick the same when resizing the window's browser. The problem is <strong>'#content' still flashes</strong> for a second. </p>

<p>If you test the code below you'll see what I mean. It's hard to express its behavior. Does anybody know how to fix that? Does it have anything to do with callback functions and the order of events. 
Thank you.</p>

<p>Here is the code: </p>

<pre><code>&lt;html&gt;
    &lt;head&gt;          
        &lt;script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"&gt;&lt;/script&gt;     
        &lt;style&gt;
            html, body{
                padding: 0;         
                margin: 0, auto;                
            }           
            body{
                position:absolute;
                margin: 0px;
                padding: 0px;
            }
            #content{
                background-color: green;
            }
            #mainContent{
                background-color: orange; 
            }
            aside{
                background-color: blue;
            }
            .floatLeft{
                float:left;
            }
            .clear{
                clear:both;
            }
        &lt;/style&gt;
    &lt;/head&gt;
    &lt;body&gt;      
        &lt;section id="content" class="border"&gt;
            &lt;section id="mainContent" class="floatLeft" &gt;   
                mainContent
            &lt;/section&gt;                      
            &lt;!-- End of main content --&gt;

            &lt;aside class="floatLeft"&gt;                               
                aside                   
            &lt;/aside&gt;
            &lt;!-- End of aside --&gt;

            &lt;p class="clear"&gt;&lt;/p&gt;

        &lt;/section&gt;
        &lt;!-- End of content --&gt;

        &lt;script type="text/javascript"&gt;
            $(document).ready(function(){               
                change_template();
            });

            change_template = function(){       
                var window_h, window_w, top, left_right, content_w, mcontent_w, aside_w, left_right2, last_width;       
                left_right = 180;

                aux = left_right;

                top = screen.height - (screen.height - 100);            
                left_right = left_right - (screen.width -  $(window).width())/2;


                resize_body(top, left_right, left_right);

                    last_width = $(window).width();

                    $( window ).resize(
                    function(){

                        if($(window).width() &gt; last_width){

                            left_right = left_right + ($(window).width() - last_width)/2;                           

                        }else if($(window).width() &lt; last_width){

                            left_right = left_right - (last_width -  $(window).width())/2;

                        }

                        resize_body(top, left_right, left_right);

                            last_width = $(window).width();                         

                    });                                                 

                content_w = screen.width - 2*aux;                   

                mcontent_w = content_w - 300;
                $('#mainContent').css('width', mcontent_w);

                aside_w = content_w - mcontent_w;
                $('aside').css('width', aside_w);                               

            }

            resize_body = function(top, left, right){

                $('body').css('top', top+'px');
                $('body').css('left', left+'px');
                $('body').css('right', right+'px');             
            }
        &lt;/script&gt;               
    &lt;/body&gt;
&lt;/html&gt;
</code></pre>
