title: CSS/HTML: How would I make these images horizontally-aligned?
body: <p>The problem I'm having is that my social media images/links are being displayed vertically. I would rather have it be displayed horizontally.</p>
  
  <p>jsFiddle: <a href="http://jsfiddle.net/JordanSimps/DQmm6/" rel="nofollow">http://jsfiddle.net/JordanSimps/DQmm6/</a></p>
  
  <hr>
  
  <p>index.html</p>
  
  <pre><code>&lt;div id="wrapper2"&gt;
      &lt;div id="twitter"&gt;
              &lt;a href="http://www.twitter.com" title="Twitter" id="twit"&gt;
  
              &lt;/a&gt;
              &lt;a href="http://www.facebook.com" title="Facebook"&gt;
                  &lt;div id="ff"&gt;
                  &lt;/div&gt;
              &lt;/a&gt;
              &lt;a href="http://www.youtube.com" title="YouTube"&gt;
                  &lt;div id="youtube"&gt;
                  &lt;/div&gt;
              &lt;/a&gt;
              &lt;a href="http://www.vimeo.com" title="Vimeo"&gt;
                  &lt;div id="vimeo"&gt;
                  &lt;/div&gt;
              &lt;/a&gt;
              &lt;a href="http://www.addthis.com" title="AddThis"&gt;
                  &lt;div id="addthis"&gt;
                  &lt;/div&gt;
              &lt;/a&gt;
              &lt;a href="http://www.dribble.com" title="Dribble"&gt;
                  &lt;div id="dribble"&gt;
                  &lt;/div&gt;
              &lt;/a&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>style.css</p>
  
  <pre><code>/* Social Media Links */
      #wrapper2 {
          right: 34%;
          height: 10.850em;
          position: relative;
          float: right;
      }
  
      #twitter {
          position: absolute;
          list-style-type: none;
          bottom: 0;
          width: 225px;
          height: auto;
          overflow: hidden;
      }
  
      #twit {
          height: 32px;
          width: 32px;
          background-image: url(http://a.pictureupload.us/8067689795106d571328a7.jpg);
          background-repeat: no-repeat;
          background-color: transparent;
          background-position: top;
      }
  
      #twit:hover {
          background-position: bottom;
      }
  
      #ff {
          height: 32px;
          width: 32px;
          background-image: url(http://a.pictureupload.us/12635610355106d56e2c160.jpg);
          background-repeat: no-repeat;
          background-color: transparent;
          background-position: top;
      }
  
      #ff:hover {
          background-position: bottom;
      }
  
      #youtube {
          height: 32px;
          width: 32px;
          background-image: url(http://a.pictureupload.us/18402255565106d576a5d84.jpg);
          background-repeat: no-repeat;
          background-color: transparent;
          background-position: top;
      }
  
      #youtube:hover {
          background-position: bottom;
      }
  
      #vimeo {
          height: 32px;
          width: 32px;
          background-image: url(http://a.pictureupload.us/11318810305106d57415681.jpg);
          background-repeat: no-repeat;
          background-color: transparent;
          background-position: top;
      }
  
      #vimeo:hover {
          background-position: bottom;
      }
  
      #addthis {
          height: 32px;
          width: 32px;
          background-image: url(http://a.pictureupload.us/15195458355106d56859b0c.jpg);
          background-repeat: no-repeat;
          background-color: transparent;
          background-position: top;
      }
  
      #addthis:hover {
          background-position: bottom;
      }
  
      #dribble {
          height: 32px;
          width: 32px;
          background-image: url(http://a.pictureupload.us/8852823855106d56b1b08a.jpg);
          background-repeat: no-repeat;
          background-color: transparent;
          background-position: top;
      }
  
      #dribble:hover {
          background-position: bottom;
      }
  </code></pre>