title: How can I make my icon <div>s show up next to each other, rather than underneath each other?
body: <p>I have this</p>
  
  <pre><code>&lt;a href="#"&gt;&lt;div class="iconFriends"&gt;&lt;/div&gt;&lt;/a&gt;
  &lt;a href="#"&gt;&lt;div class="iconFavorite"&gt;&lt;/div&gt;&lt;/a&gt;
  &lt;a href="#"&gt;&lt;div class="iconPM"&gt;&lt;/div&gt;&lt;/a&gt;
  &lt;a href="#"&gt;&lt;div class="iconShield"&gt;&lt;/div&gt;&lt;/a&gt;
  </code></pre>
  
  <p>and the css for the icons class looks all similiar to this:</p>
  
  <pre><code>.iconFriends{
  background: url(../images/icons/friends_16x16.png) no-repeat;
  width: 16px;
  height: 16px;
  border: none;
  }
  </code></pre>
  
  <p>Now the results is that there is like a <code>&lt;br&gt;</code> when I do this. But if i remove the div and make a normal <code>&lt;img src="..."&gt;</code> It shows fine. How can i fix this?</p>