How can I make my <div> s icon next to each other and not under each other?

Question

I have it

<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 css for the icon class looks just like that:

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

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

Answer 1

set display:inline-block for your divs or better yet, remove the divs and apply the style to the a tags directly (again using 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 to give them all float:left

Answer 3

In your CSS:

 .iconFriends{ background: url(../images/icons/friends_16x16.png) no-repeat; width: 16px; height: 16px; border: none; float: left /* or right, depending on the desired outcome */ } 

Answer 4

Option 1: replace <div> with <span>

Option 2: set the <div> to display: inline; . Its display property value is block by default, so each one is on a separate line.

 .iconFriends { display: inline; ... 

Answer 5

I would suggest changing the order of your elements as follows:

 <div class="icon iconFriends"><a href="#"></a></div> 

Note the extra icon class in the div.

Then use this for your CSS:

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

Adding float: left; will bring them all on one line. Setting display: block; on a will allow you to set the width and height (making the whole element clickable).