title: How can I prevent design being cut off in browser window?
body: <p>When the browser is hiding some of the design (meaning scroll bars appear), the header and footer get sliced off. In other words, if the browser is narrower than the width of the "logo" and "footer_links" divs, then it cuts off the right side if the user scrolls horizontally to view the rest of the page. Seems that the issue stems from trying to position (relative or absolute) a div within either the header or footer.</p>
  
  <p>Here's the CSS:</p>
  
  <pre><code>html,
  body {
      margin:0;
      padding:0;
      height:100%;
  }
  #container {
     min-height:100%;
     position:relative;
  }
  #header {
      background:green;
      padding:0px;
      margin: 0;
      height: 100px;
  }
  #logo {
      position: relative;
      width: 900px;
      margin: 0 auto;
      left: 20px;
      background: yellow;
      height: 70px;
  }
  #body {
     padding:10px;
     padding-bottom:60px; 
  }
  #footer {
     position:absolute;
     bottom:0;
     width:100%;
     height:60px;   
     background: blue;
  }
  #footer_links {
      width: 900px;
      height: 60px;
      background: yellow;
      margin: 0 auto;
  }
  </code></pre>
  
  <p>Here's the HTML:</p>
  
  <pre><code>&lt;div id="container"&gt; 
  
  &lt;div id="header"&gt; 
      &lt;div id="logo"&gt;
      &lt;/div&gt;
  &lt;/div&gt; 
  
  &lt;div id="body"&gt; 
  &lt;/div&gt;
  
  &lt;div id="footer"&gt;
      &lt;div id="footer_links"&gt; 
      &lt;/div&gt;
  &lt;/div&gt; 
  
  &lt;/div&gt; 
  </code></pre>
  
  <p>I thought overflow: visible would solve the problem, but it didn't.  How can I avoid this issue? </p>
  
  <p>Thanks in advance for your help.</p>