How to put an image next to each other - html

Question

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"><img src="images/facebook.png">
</div>
<div id="icons"><img src="images/twitter.png">
</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

Answer 1

You don't need the div's.
HTML:
<div class="nav3" style="height:705px;">
<img src="images/facebook.png">
<img src="images/twitter.png">
</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

Answer 2

Change div to span. And space the icons using
HTML
<div class="nav3" style="height:705px;">
<span class="icons"><img src="images/facebook.png">
</span>
<span class="icons"><img src="images/twitter.png">
</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.

Answer 3

Check this out. Just use float and get rid of relative.
http://jsfiddle.net/JhpRk/
#icons{float:left;}

Answer 4

try putting both images next to each other. Like this:
<div id="icons"><img src="images/facebook.png"><img src="images/twitter.png">
</div>

Answer 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.