Come mettere un'immagine l'una accanto all'altra

Question

Sto provando a mettere queste due icone "hyperlinked" l'una accanto all'altra ma non riesco a farlo. Come si può vedere, l'icona di Twitter cade alla riga successiva .. (sono entrambi collegamenti ipertestuali ai rispettivi siti)

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; 

} 

Come faccio a rendere l'allineato l'uno accanto all'altro?

Grazie in anticipo

Answer 1

Invece di usare position:relative in #icons, si può solo prendere quella via e magari aggiungere un z-index o qualcosa di così l'immagine non verrà coperto. Spero che questo ti aiuti.

Answer 2

Non hai bisogno del div.

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

Vedi this fiddle

Answer 3

Change div a Span. E lo spazio le icone utilizzando   HTML

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

taratura non interruzione di linea, div fa.

Answer 4

Controllare questo. Basta usare il galleggiante e sbarazzarsi del parente.

http://jsfiddle.net/JhpRk/

#icons{float:left;}