title: CSS Positioning - How can you fix components in place?
body: <p>Example - <a href="http://appdist.me" rel="nofollow">http://appdist.me</a></p>
  
  <p>What I'd like to do is have the keyboard SVG fixed to the bottom of the screen and take up half the screen height, with the Facebook logo always overlaying the 'Q' key, no matter how the window is resized.</p>
  
  <p>I've been trying to do this for days. What am I doing wrong? Thanks.</p>
  
  <p>Here's my HTML:</p>
  
  <pre><code>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt;
          &lt;link href="style.css" rel="stylesheet" type="text/css"&gt;
          &lt;title&gt;CSS Layout Problem&lt;/title&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;div id="svg"&gt;
              &lt;embed src="keyboard-gray.svg" id="keyboard"
                           type="image/svg+xml"
                           pluginspage="http://www.adobe.com/svg/viewer/install/"/&gt;
              &lt;embed src="fb.svg" id="facebook"
                           type="image/svg+xml"
                           pluginspage="http://www.adobe.com/svg/viewer/install/"/&gt;
              &lt;embed src="frame.svg" id="frame"
                           type="image/svg+xml"
                           pluginspage="http://www.adobe.com/svg/viewer/install/"/&gt;
          &lt;/div&gt;
      &lt;/body&gt;
  </code></pre>
  
  <p>Here is my CSS:</p>
  
  <pre><code>body{
      background-color: #333;
  }
  
  #svg{
  
  } 
  
  #facebook{
     position: fixed;
     width: 6%;
     height: 6%;
  }
  
  #frame{
     position: fixed;
     width: 100%;
     height: 47%;
     top: 2%;
     left: 0;
  }
  
  #keyboard{
     position: fixed;
     width: 100%;
     height: 50%;
     bottom: 2%;
     left: 0;
  }
  </code></pre>