title: Dynamic Page Margins CSS
body: <p>I have a website in which I want to have a similar layout as Stackoverflow regarding browser window resize.</p>
  
  <p>So I have the following CSS :</p>
  
  <pre><code>#site-container {
      margin: 0px auto;
      text-align: left;
      width: 100%;
      zoom: 1;
      position: relative;
  }
  
  body {
      font-family: arial, helvetica, sans-serif;
      font-size: 81.25%;
      background-color: #fbf9ef;
  }
  
  #div-menu {
      display: inline;
  }
  
  #header {
      width: 990px;
      height: 80px;
      margin-left : 127px;
      margin-right : 127px;
      margin-bottom: 12px;
      margin-top: 20px;
      border-bottom: 1px solid #c0c0c0;
  }
  
  #content {
      width: 990px;
      margin-left : 127px;
      margin-right : 127px;
  }
  </code></pre>
  
  <p>However when I resize my browser Window it does not behave like Stackoverflow, somehow Stackoverflow seems to be Floating and automatically reduce margins according to the browser window size.</p>
  
  <p>Thanks</p>