How To Put An Image Next To Each Other

I'm trying to put these two 'hyperlinked' icons next to each other but I can't seem to do that. As you can see, the twitter icon falls to the next line.. (they are both hyperlinked

Solution 1:

You don't need the div's.

HTML:

<div class="nav3" style="height:705px;">
    <ahref="http://www.facebook.com/"class="icons"><imgsrc="images/facebook.png"></a><ahref="https://twitter.com"class="icons"><imgsrc="images/twitter.png"></a></div>

CSS:

.nav3 {
    background-color: #E9E8C7;
    height: auto;
    width: 150px;
    float: left;
    padding-left: 20px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #333333;
    padding-top: 20px;
    padding-right: 20px;
}

.icons{
    display:inline-block;
    width: 64px; 
    height: 64px; 
   }

 a.icons:hover {
     background: #C93;
 }

See this fiddle

Solution 2:

Change div to span. And space the icons using   HTML

 <div class="nav3" style="height:705px;">
 <spanclass="icons"><ahref="http://www.facebook.com/"><imgsrc="images/facebook.png"></a></span>&nbsp;&nbsp;&nbsp;<spanclass="icons"><ahref="https://twitter.com"><imgsrc="images/twitter.png"></a></span></div>

CSS

.nav3 {
background-color: #E9E8C7;
height: auto;
width: 150px;
float: left;
padding-left: 20px;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #333333;
padding-top: 20px;
padding-right: 20px;
}

.icons{
display:inline-block;
width: 64px; 
height: 64px; 
}

 a.icons:hover {
 background: #C93;
 }

span does not break line, div does.

Solution 3:

Check this out. Just use float and get rid of relative.

http://jsfiddle.net/JhpRk/

#icons{float:left;}

Solution 4:

try putting both images next to each other. Like this:

<divid="icons"><ahref="http://www.facebook.com/"><imgsrc="images/facebook.png"></a><ahref="https://twitter.com"><imgsrc="images/twitter.png"></a></div>

Solution 5:

Instead of using position:relative in #icons, you could just take that away and maybe add a z-index or something so the picture won't get covered up. Hope this helps.