title: Social icons which are fixed to the centre right side of the browser
body: <p>I am trying to position my social icons to the right side of the browser so that when the browser resizes they always stay following to the right side of the browser, Here is a JSfiddle showing what they currently do <a href="http://jsfiddle.net/SHHM8/" rel="nofollow">http://jsfiddle.net/SHHM8/</a>, </p>
  
  <h2>HTML</h2>
  
  <pre><code>&lt;div id="fixedsocial"&gt;
      &lt;div class="facebookflat"&gt;&lt;/div&gt;
      &lt;div class="twitterflat"&gt;&lt;/div&gt; 
  &lt;/div&gt;
  </code></pre>
  
  <h2>CSS</h2>
  
  <pre><code>#fixedsocial {
      top:30%;
      height:200px;
      width:60px;
      position:fixed;
  }
  
  .facebookflat {
      background:url("http://placehold.it/50x50");
      height:50px;
      width:50px;
     transition:ease 500ms;
      background-size:50px;
      opacity:1;
  }
  
  .facebookflat:hover {
      background:url("http://placehold.it/50x50");
      height:50px;
      width:50px;
      background-size:60px;
      opacity:0.5;
      transition:ease 500ms;
      margin-left:-20px;
      width:70px;
  
  }
  
  .twitterflat {
      background:url("http://placehold.it/50x50");
      height:50px;
      width:50px;
      transition:ease 500ms;
      background-size:50px;
      opacity:1;
  }
  
  .twitterflat:hover {
      background:url("http://placehold.it/50x50");
      height:50px;
      width:50px;
      background-size:60px;
      opacity:0.5;
      transition:ease 500ms;
      margin-left:-20px;
      width:70px;
  }
  </code></pre>
  
  <p>I have tried to float the container named 'fixedsocial' to the right side of the screen using</p>
  
  <pre><code>float:right;
  </code></pre>
  
  <p>however this doesn't do anything.</p>
  
  <p>So please could you make the icons fixed to the center right side of the browser, Thankyou very much for any help </p>