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


Tags: html,css

Problem :

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?



Solution :

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;
}

    CSS Howto..

    How to remove gap above and below my div? [duplicate]

    How to remove default chrome style for select Input?

    How to Wrap Text Within an Image-Link? HTML CSS

    How to define the css :focus state in a jQuery selector?

    How to align an element applying css margins that does not get modified according to browsers and screen resolutions?

    On scroll up use the animate() and show the div

    How can I add text to a jQuery slider control?

    How can I force a table cell onto a new row

    How to Pause ALL CSS animations?

    How can I escape string css in sass/scss?

    How do I make a div with guide lines?

    How to add multiple link styles on the same page?

    So I have an HTML file with a paragraph and I need to break into three lines BUT i can only modify the CSS. How do I pull this off? (code below)

    how to change some css Properties according to text length

    How to vertically and horizontally centre text with a variating font size in CSS

    How do I avoid 'bottom-aligned' labels with inline associated inputs?

    How do you get multiple views in one window like JSFiddle does [closed]

    How to wrap Font-Awesome with CSS?

    how do I create unique looking angular ui bootstrap dialogs

    CSS div border shows up, but is transparent

    How To Remove Wordpress Title From One Page?

    How to prevent mouseenter event action with jQuery

    How to make links look like tabs using html/css?

    How to center div within col-md-12 in bootstrap

    How to select a css class as selected dynamically in mvc

    How to make scrollable table's header fixed using css fixed position property?

    HTML / CSS: How to get fixed margin between body and footer

    How do i wrap a parent div to the width of a child div (dialog)?

    How to line up the bottom of side-by-side Div layers in CSS

    CSS: How to theme only submit button (and not cancel or back button) - I´m using Drupal 6