How to put an image next to each other

css, html, image

Solution

You don't need the div's.

HTML:

<div class="nav3" style="height:705px;">
    <a href="http://www.facebook.com/" class="icons"><img src="images/facebook.png"></a>
    <a href="https://twitter.com" class="icons"><img src="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

Problem

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 to their respective website) HTML ``` <div class="nav3" style="height:705px;"> <div id="icons"><a href="http://www.facebook.com/"><img src="images/facebook.png"></a> </div> <div id="icons"><a href="https://twitter.com"><img src="images/twitter.png"></a> </div> </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{position:relative; width: 64px; height: 64px; } #icons a:hover { background: #C93; display: block; } ``` How do I make the aligned next to each other? Thanks in advance

Original source