title: Making my site scale to resolution sizes in css
body: <p>This is my first week of programming in CSS, HTML and PHP. I realized when beginning my site that when I scaled my site by window size that all the text would begin to overlap, cause issues and look terrible.</p>
  
  <p>I was wondering if I could get a clear answer on what I am doing horribly wrong. I have tried methods such as media queries but I still don't understand it at all.</p>
  
  <p>Here is my code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>/* Reset body padding and margins */
  
  body {
    margin: 0px;
    padding: 0px;
  }
  
  
  /* Make Header Sticky */
  
  #header_container {
    background: black;
    border: 1px solid #666;
    height: 40px;
    left: 0;
    position: fixed;
    width: 100%;
    top: 0;
  }
  
  #header {
    line-height: 5px;
    margin: 10px;
    auto: width:940px;
    text-align: left;
  }
  
  #headertext {
    font-family: "sans-serif";
    size: 20px;
    padding: 2px;
    font-size: 120%;
    text-decoration: none;
  }
  
  
  /* CSS for the content of page. I am giving top and bottom padding of 80px to make sure the header and footer do not overlap the content.*/
  
  #container {
    margin: auto;
    overflow: auto;
    padding: 80px;
    width: 100%;
    height: auto;
  }
  
  #content {}
  
  
  /* CSS FOR HOME PAGE CONTENTS */
  
  #hometext {
    font-family: "arial";
    padding: 1px;
    font-size: 100%;
    text-decoration: none;
    position: absolute;
    top: 5em;
    left: 4em;
    color: #585858;
    margin-right: 850px;
  }
  
  #hometext2 {
    font-family: "arial";
    padding: 10px;
    font-size: 80%;
    text-decoration: none;
    position: absolute;
    top: 7em;
    left: 4.24em;
    color: #585858;
    margin-right: 1200px;
  }
  
  #hometext3 {
    font-family: "arial";
    padding: 1px;
    font-size: 100%;
    text-decoration: none;
    position: absolute;
    top: 5m;
    left: 65em;
    color: #585858;
    margin-right: 0;
  }
  
  #hometext4 {
    font-family: "arial";
    padding: 18px;
    font-size: 80%;
    text-decoration: none;
    position: absolute;
    top: 10m;
    left: 80em;
    color: #585858;
    margin-right: 0;
  }
  
  #home_container</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
  
  &lt;html xmlns="http://www.w3.org/1999/xhtml" lang="en"&gt;
  
  &lt;html&gt;
  
  &lt;head&gt;
    &lt;link rel="stylesheet" type="text/css" href="style/style.css" /&gt;
  
    &lt;title&gt;replay.sc&lt;/title&gt;
    &lt;meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /&gt;
    &lt;style type="text/css"&gt;
  a:link {
        color: grey;
      }
      
      a:visited {
        color: grey;
      }
      
      a:hover {
        color: white;
      }
      
      a:active {
        color: grey;
      }
      
      text-decoration: none;
    }
  }
    &lt;/style&gt;
  
  
  &lt;/head&gt;
  
  &lt;body font="sans-serif" id="container"&gt;
  
  
    &lt;!--- BEGIN: STICKY HEADER --&gt;
    &lt;div id="header_container"&gt;
      &lt;div id="header"&gt;
        &lt;p&gt;&lt;a id="headertext" a href="replay.sc"&gt; replay.sc &lt;/a&gt;
          &lt;p&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;!-- END: STICKY HEADER --&gt;
  
    &lt;!-- BEGIN: Sticky Footer --&gt;
    &lt;div id="footer_container"&gt;
      &lt;div id="footer"&gt;
  
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;!-- END: Sticky Footer --&gt;
    &lt;div id="home_container"&gt;
      &lt;h1 id="hometext"&gt; Upload your replay here to generate a page containing a download link and various information on the replay. &lt;/h1&gt;
      &lt;p id="hometext2"&gt; When the page is generated you will have the option to select which information on the replay you want to display to the public, if you are logged in you will be able to edit this in the future.&lt;/p&gt;
  
      &lt;h1 id="hometext3"&gt; Upload a replay pack here to generate a page containing download links for every replay or for a .rar file of every replay. &lt;/h1&gt;
      &lt;p id="hometext4"&gt; Only basic information for each replay will be made to conserve server load. &lt;/p&gt;
    &lt;/div&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>