How can I make my icon <div>s show up next to each other, rather than underneath each other?

Question

I have this

<a href="#"><div class="iconFriends"></div></a>
<a href="#"><div class="iconFavorite"></div></a>
<a href="#"><div class="iconPM"></div></a>
<a href="#"><div class="iconShield"></div></a>

and the css for the icons class looks all similiar to this:

.iconFriends{
background: url(../images/icons/friends_16x16.png) no-repeat;
width: 16px;
height: 16px;
border: none;
}

Now the results is that there is like a <br> when I do this. But if i remove the div and make a normal <img src="..."> It shows fine. How can i fix this?

Answer 1

set your divs to have display:inline-block or better yet remove the divs and apply the styling to the a tags directly (again with display:inline-block)

html

<a href="#" class="iconFriends"></a>
<a href="#" class="iconFavorite"></a>
<a href="#" class="iconPM"></a>
<a href="#" class="iconShield"></a>

css

.iconFriends{
   background: url(../images/icons/friends_16x16.png) no-repeat;
   width: 16px;
   height: 16px;
   border: none;

   display:inline-block;
}

Answer 2

try giving them all a float:left