How do I make website page adjust to the browser window?

I am working on my portfolio page for class. I am trying to get the web page to adjust with the browser when the browser gets resized. Mainly the navigation links I have in header. Also when screen is in full my navigation links are in the top right corner. But when I restore down the window it is center in middle. What do I do? Any help will be appreciated. Here is my code. If that helps any.

#header, 
#main, 
#footer{

display:block;
position:relative;
float:left;
}
#header,
#footer{
width:1100px;
height:80px;
}
#header{
margin-bottom:2px;
}
#footer{
margin-top:2px;
text-align:right;
border:2px;
}
#main{
width:650px;
height:200px;
margin-left:200px;
margin-right:200px;
margin-top:200px;
}
#leftcol{
float:left;
}
#nav{
border:2px solid #F00;
border-width:1px 0;
list-style:none;
margin:0;
padding:0;
text-align:center;
}
#nav li{
display:inline;
}
#nav a{
display:inline-block;
padding:10px;
}


<html>

    <head>
        <title></title>
        <link href="styles.css" rel="stylesheet" type="text/css">
        <style type="text/css">
            .auto-style1 {
                text-align: left;
            }
        </style>
    </head>

    <body>
        <div class="auto-style1">
            <div id="header">Header

<h1>Creative Minds Inc.</h1>

            </div>
            <div id="nav">Navigation
                <ul>
                    <li><a href="homepage.html">Homepage</a>
                    </li>
                    <li><a href="#">Tips and Trick</a>
                    </li>
                    </li><a href="aboutme.html">About me</a>
                    </li>
                    <li><a href="#">Get in Touch</a>
                    </li>
                </ul>
            </div>
            <div id="main">Main

<h2>A passion for design and a creative mind.</h2>


<h3>Design, Develop, Dream</h3>

            </div>
            <div id="sidebar">Navigation</div>
            <div id="footer">Footer

<h3>Creative Minds Inc.  Jonathan Mourning</h3>

            </div>
        </div>
    </body>

</html>

Solution

You can use the standard resize DOM event. Then at

window.onresize = function(event) {
    ...
}

you can adjust the elmenets positions and size accordingly.

However In general, you could avoid fixed sizes and provide percentage values for your DOM elements, in order for them to resize automatically under all screen sizes and ratios. For example, if your page has a vertical orientation, change width to 100% and have your #main element always align the center of the screen:

#main{
width:650px; /*or 70% */
height:200px;
margin-left:auto;
margin-right:auto;
text-align:center;
margin-top:200px;
}

Here is an example with the code :http://jsfiddle.net/TZGXf/4/ Here is a full screen: http://jsfiddle.net/TZGXf/4/embedded/result/