title: How do I make website page adjust to the browser window?
body: <p>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.</p>
  
  <pre><code>#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;
  }
  
  
  &lt;html&gt;
  
      &lt;head&gt;
          &lt;title&gt;&lt;/title&gt;
          &lt;link href="styles.css" rel="stylesheet" type="text/css"&gt;
          &lt;style type="text/css"&gt;
              .auto-style1 {
                  text-align: left;
              }
          &lt;/style&gt;
      &lt;/head&gt;
  
      &lt;body&gt;
          &lt;div class="auto-style1"&gt;
              &lt;div id="header"&gt;Header
  
  &lt;h1&gt;Creative Minds Inc.&lt;/h1&gt;
  
              &lt;/div&gt;
              &lt;div id="nav"&gt;Navigation
                  &lt;ul&gt;
                      &lt;li&gt;&lt;a href="homepage.html"&gt;Homepage&lt;/a&gt;
                      &lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Tips and Trick&lt;/a&gt;
                      &lt;/li&gt;
                      &lt;/li&gt;&lt;a href="aboutme.html"&gt;About me&lt;/a&gt;
                      &lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Get in Touch&lt;/a&gt;
                      &lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;
              &lt;div id="main"&gt;Main
  
  &lt;h2&gt;A passion for design and a creative mind.&lt;/h2&gt;
  
  
  &lt;h3&gt;Design, Develop, Dream&lt;/h3&gt;
  
              &lt;/div&gt;
              &lt;div id="sidebar"&gt;Navigation&lt;/div&gt;
              &lt;div id="footer"&gt;Footer
  
  &lt;h3&gt;Creative Minds Inc.  Jonathan Mourning&lt;/h3&gt;
  
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>