Missing pixels & body stops centering when resizing jquery
<p>I'm facing some problems with this code. I thought may be you could help me. </p>

<p>First of all, my sections have no padding and no border so the pixels are used only for top, left, right and width properties 
and there is no need for outerWidth().</p>

<p>First problem: 
In the beginning I set the body 'left' and 'right' property at (window_width - 1100 = 180) so my body width 
is 920px. 
The thing is it's not. <strong>It turns to be 904</strong>. I've tested it with chrome and mozilla. 
<strong>I don't know where the 16 missing pixels are.</strong></p>

<p>Second: 
I want my body to be centered when I resize the window and my margins to grow less until body occupies the whole
window. </p>

<p><strong>My body doesn't remain centered, plus only one of the margins grows less.</strong> </p>

<p>I found out this is happening because '#content', '#mainContent', 'aside' have a width. I kinda' need that width to be set. 
Is there any way I can make my window center itself with jquery and do all the stuff above?</p>

<p>Here is my 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;
            body{
                position:absolute;          
            }
            #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;        

                window_h = $(window).height();
                window_w = $(window).width();

                top = window_h - (window_h - 100);
                left_right = window_w - 1100;

                content_w = window_w - 2*left_right;                
                $('#content').css('width', content_w);

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

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

                resize_body(top, left_right, left_right);

                //next three lines are written only for demonstration purpose
                left_right = ($(window).width() - parseInt($('body').css('width')))/2;
                alert('body width: '+$('body').css('width'));//it supposed to be 920
                alert('left propery value: '+left_right);//it supposed to be 180

                $(window).resize(function(){
                    left_right = ($(window).width() - parseInt($('body').css('width')))/2;
                    resize_body(top, left_right, left_right);
                });

            }

            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>
