title: HTML/CSS Fitting object/everything on any window size/resolution
body: <p>So, my friend and I are working on a mod for a game called <code>Minecraft</code> and I had the duty to make a website where we publish this mod and tell every one what this mod is about.</p>
  
  <p>The problem that I'm currently facing is that I can't get my objects to shrink/grow to fit any browser resolution/window resolution. Currently, I have it so it is formatted to my screen resolution (1920 x 1080) and it seems to be fine, but when I make the window smaller, I have to use the horizontal scrolling bar to get to different areas on the html page.</p>
  
  <p>When I shrink the window, I want it to fit that window.</p>
  
  <p>Same goes with screen monitors. If it isn't my screen resolution, you have to use the horizontal scrolling bar.</p>
  
  <p>How do I make it so my page objects will change size depending on window size/resolution size?</p>
  
  <p><strong>Code:</strong></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;meta charset="utf-8"&lt;/meta&gt;
  
          &lt;meta name="msapplication-TileColor" content="#FFFFFF"&gt;
          &lt;meta name="msapplication-TileImage" content="MOPM-ico/favicon-144.png"&gt;
          &lt;meta name="msapplication-config" content="MOPM-ico/browserconfig.xml"&gt;
  
          &lt;link rel="shortcut icon" href="MOPM-ico/favicon.ico"&gt;
          &lt;link rel="icon" sizes="16x16 32x32 64x64" href="MOPM-ico/favicon.ico"&gt;
          &lt;link rel="icon" type="image/png" sizes="310x310" href="MOPM-ico/favicon-310.png"&gt;
          &lt;link rel="icon" type="image/png" sizes="196x196" href="MOPM-ico/favicon-196.png"&gt;
          &lt;link rel="icon" type="image/png" sizes="160x160" href="MOPM-ico/favicon-160.png"&gt;
          &lt;link rel="icon" type="image/png" sizes="96x96" href="MOPM-ico/favicon-96.png"&gt;
          &lt;link rel="icon" type="image/png" sizes="64x64" href="MOPM-ico/favicon-64.png"&gt;
          &lt;link rel="icon" type="image/png" sizes="32x32" href="MOPM-ico/favicon-32.png"&gt;
          &lt;link rel="icon" type="image/png" sizes="16x16" href="MOPM-ico/favicon-16.png"&gt;
          &lt;link rel="apple-touch-icon" sizes="152x152" href="MOPM-ico/favicon-152.png"&gt;
          &lt;link rel="apple-touch-icon" sizes="144x144" href="MOPM-ico/favicon-144.png"&gt;
          &lt;link rel="apple-touch-icon" sizes="120x120" href="MOPM-ico/favicon-120.png"&gt;
          &lt;link rel="apple-touch-icon" sizes="114x114" href="MOPM-ico/favicon-114.png"&gt;
          &lt;link rel="apple-touch-icon" sizes="76x76" href="MOPM-ico/favicon-76.png"&gt;
          &lt;link rel="apple-touch-icon" sizes="72x72" href="MOPM-ico/favicon-72.png"&gt;
          &lt;link rel="apple-touch-icon" href="MOPM-ico/favicon-57.png"&gt;
  
          &lt;link type="text/css" rel="stylesheet" href="styles.css" /&gt;
  
          &lt;title&gt;
              MOPM~
          &lt;/title&gt;
  
      &lt;/head&gt;
  
      &lt;body&gt;
          &lt;header&gt;
              &lt;!--header--&gt;
              &lt;div class="topHead"&gt;
                  &lt;img id="headertxt" src="pictures/header.png" width="1919px" height="120px"/&gt;
              &lt;/div&gt;
  
              &lt;!--header buttons--&gt;
                  &lt;div class="headButtonSeperator"&gt;
                  &lt;div class="headButton"&gt;home&lt;/div&gt;
                  &lt;div class="headButton"&gt;about&lt;/div&gt;
                  &lt;div class="headButton"&gt;mod info&lt;/div&gt;
                  &lt;div class="headButton"&gt;downloads&lt;/div&gt;
                  &lt;div class="headButton"&gt;videos&lt;/div&gt;
                  &lt;div class="headButton"&gt;links&lt;/div&gt;
                  &lt;div class="headButton"&gt;dev team&lt;/div&gt;
              &lt;/div&gt;
          &lt;/header&gt;
  
          &lt;!--content--&gt;
          &lt;div id="home"&gt;
  
          &lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>body
  {
      background-image: url('pictures/background.png');
  }
  
  /*--Classes--*/
  .topHead
  {
      width: 1919px;
      height: 120px;
      background-color: #272B30;
      float: middle;
      position: absolute;
      margin: auto;
      top: 0px;
      left: 0px;
      right: 0px;
      display: block;
      border-bottom: 4px dashed #1EC20B;
  }
  
  .headButtonSeperator
  {
      width: 980px;
      height: 40px;
      background-color: none;
      position: absolute;
      top: 125px;
      left: 509px;
  }
  
  .headButton
  {
      width: 120px;
      height: 10px;
      background-color: #313A3D;
      margin-left: 5px;
      display: inline-block;
      float: left;
      font-size: 0px;
  
      border-left: 3px solid #282E30;
      border-bottom: 3px solid #282E30;
  
      border-bottom-left-radius: 20px;
  }
  
  
  .headButton:hover
  {
      width: 140px;
      height: 35px;
      background-color: #313A3D;
      margin-left: 10px;
      position: relative;
      display: inline-block;
  
      color: #DB481B;
      font-size: 20px;
      text-align: center;
      line-height: 35px;
      font-family: minecraft;
      text-shadow: 2px 2px #7A5E55;
  
      border-left: 3px solid #282E30;
      border-bottom: 3px solid #282E30;
      border-bottom-left-radius: 20px;
  }
  
  /*--ID's--*/
  #home
  {
      display: block;
      width: 918px;
      height: 1000px;
      background-color: white;
      position: absolute;
      top: 500px;
      left: 500px;
      float: middle;
      z-index: -1;
  }
  
  /*--Fonts--*/
  @font-face
  {
          font-family: minecraft;
          src: url(fonts/minecraft.ttf);
  }
  
  @font-face
  {
          font-family: McBold;
          src: url(fonts/ARCADEPI.ttf);
  }
  
  @font-face
  {
          font-family: McBlock;
          src: url(fonts/Square.ttf);
  }
  
  
  @font-face
  {
          font-family: MccBlock;
          src: url(fonts/Squareo.ttf);
  }
  </code></pre>
  
  <p><strong>Edit:</strong>
  I am not getting any answers and I really want to get this done so I can work on the other aspects of the page.</p>
  
  <p>Do I need to use percentages?
  What am I doing wrong that wont make it position according to resolution/window size?</p>
  
  <p><strong>Edit:</strong>
  So I understand now that I have to make my page responsive by not using <code>px</code>
  How exactly do I make it responsive and what measurements can I use?</p>
  
  <p>Edit:
  <strike>I did a little bit of testing with percentages and it didn't seem to work.
  In this picture, i am testing the head banners width with a width: 100%
  I made the window smaller and the top wording (which is an image) doesn't
  shrink down to the size of the window.</p>
  
  <p><a href="http://prntscr.com/47v2ub" rel="nofollow">http://prntscr.com/47v2ub</a> &lt;---image</strike></p>
  
  <p><strong>Edit:</strong>
  Update on the above edit:
  I figured out that i had to make >.topHead also have a >width: 100</p>
  
  <p>The problem i am facing now is that if the browser gets too small, all of my buttons bunch up</p>