title: make a div grow and shrink based on the browser window size
body: <p>I am making a very simple html page and would like to know how to do the following two things for my page:</p>
  
  <ol>
  <li>I have a container div and would like to put the container div in the center of the page.</li>
  <li>The container div will grow and shrink when I resize the windows size.</li>
  </ol>
  
  <p>I wrote the attached code but the container is always sticked on the left and it won't change the size when I resize the window.</p>
  
  <pre><code>&lt;title&gt;Demo&lt;/title&gt;
  &lt;head&gt;This is a demo&lt;/head&gt;
  &lt;style&gt;
  #nav
  {
  background-color: red;
  float: left;
  width: 200px;
  position:relative;
  
  }
  
  #detail
  {
  background-color: green;
  float : right;
  width: 800px;
  position:relative;
  }
  
  div.testDetail 
  {
  margin-top:10px;
  margin-left:20px;
  margin-right:20px;
  margin-bottom:10px;
  }
  
  #container
  {
  width:1000px;
  position:relative;
  }
  &lt;/style&gt;
  
  &lt;hr&gt;
  &lt;body&gt;
  &lt;div id="container"&gt;
  &lt;div id="nav"&gt;
      &lt;ul&gt;Tests&lt;/ul&gt;
  &lt;/div&gt;
  &lt;div id="detail"&gt;
      &lt;div class="testDetail"&gt;
          &lt;image style="float:right;margin:5px;" src="test1.jpg" width="50px" height="50px"/&gt;
          &lt;image style="float:right;margin:5px;" src="test2.jpg" width="50px" height="50px"/&gt;
          &lt;image style="float:right;margin:5px;" src="test3.jpg" width="50px" height="50px"/&gt;
          &lt;image style="float:right;margin:5px;" src="test4.jpg" width="50px" height="50px"/&gt;
          &lt;h3&gt;Title&lt;/h3&gt;
          &lt;p&gt;Testing&lt;/p&gt;
      &lt;/div&gt;
      &lt;hr&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;body&gt;
  </code></pre>
  
  <p>Did I miss something here? Any help will be appreciate!</p>
  
  <p>Thanks.</p>