title: Positioning images in CSS
body: <p>My goal is to position a Facebook and a Twitter button on my website, using CSS.
  However, what I want doesn't seem to work.</p>
  
  <p><img src="https://i.stack.imgur.com/qIGOJ.jpg" alt="enter image description here"></p>
  
  <p>The Twitter icon always sits below the Facebook icon. Also when I resize my browser's window the position of these buttons changes. What am I doing wrong? Here is my CSS:</p>
  
  <pre><code>#social {
     position: fixed;
     _position: absolute;
     z-index: 1000;
     left:70%;
     top: 120px;
     width: 100px;
     height: 50px;
  }   
  
  #social .facebook {
     float: left;
     width: 35px;
     height: 35px;
     padding: 0 0px 0 0px; /* top, right, bottom, left */
     margin: 0;
     list-style: none;
  }
  
  #social .twitter {
     float: left;
     width: 35px;
     height: 35px;
     padding: 0 0px 0 50px; /* top, right, bottom, left */
     margin: 0;
     list-style: none;
  }
  
  #social .facebook, .twitter li {
     list-style: none;
  }
  
  #social .facebook, .twitter li a {
     text-decoration: none;
  }
  
  #social .facebook, .twitter li a img {
     border: none;
  }
  </code></pre>
  
  <p>The HTML:</p>
  
  <pre><code>&lt;div id="social"&gt;  
  
  &lt;ul class="facebook"&gt;
  &lt;li&gt;&lt;a href="http://www.facebook.com/"&gt;&lt;img src="img/facebook-button.png" width="35"    height="35" alt="Facebook" title="Volg ons op Facebook" /&gt;&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;    
  &lt;ul class="twitter"&gt;
  &lt;li&gt;&lt;a href="http://www.twitter.com/"&gt;&lt;img src="img/twitter-icon.png" width="35" height="35" alt="Twitter" title="Volg ons op Twitter" /&gt;&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  
  &lt;/div&gt;
  </code></pre>