menu orizzontale sulla stessa riga di una frase

[JenniferM]

Buon pomeriggio a tutti.
Ho bisogno di mettere sulla stessa riga di una frase un menò orizzontale.
Qui trovate l'anteprima del sito su altervista http://jennifermarchioro.altervista.org/ e il problema è in fondo sulla linea del copyright, dove a destra dovrebbe esserci il menù delle icone dei social network che invece mi finisce sotto.

Posto di seguito il codice CSS e HTML

#bot {width: 100%;
margin: 0 auto;
background-color: #221e1e;
}


#footer {
position: relative;
margin: 0 auto;
padding: 0;
width: 960px;
height: 150px;
}


#info {
margin: 0;
width: auto;
padding: 50px 10px;
line-height: 50px;
color: #f5f5f5;
}


.link {
text-decoration: none;
color: #c22f3e;
display: inline;
}


.a {
text-decoration: none;
color: #c22f3e;
display: inline;
}


.link a {
text-decoration: none;
color: #c22f3e;
}


.link a:hover, a:visited, a:focus, a:active {
text-decoration:underline;
color: #c22f3e;
}


ul#icon {
    list-style: none;
    height: 36px;
    position: relative;
    width: auto;
    padding: 10px;
    float: right;
}
  
ul#icon li {
    background-color: transparent;
    width: auto;
    padding: 0 10px;
    margin: 0;
    float: left; /* link su una sola riga */
}
  
ul#icon li a {
    display: block;
    text-decoration: none;
    width: auto;
}
  
ul#icon li:hover {
    background-color: transparent;
}

<div id="bot"><footer><div id="footer">
<div id="info">2013 © Powered by Mattia Baldan • <div class="a"><a  href=" 


" class="link">sito web</a></div> • Graphic and Design by Jennifer 


Marchioro</div>


<ul id="icon">
    <li><a href="http://www.facebook.com/jennifer.marchioro"><img 


src="http://digilander.libero.it/cheza_chan/facebook_wlb.png" alt="icona 


facebook" /></a></li>
    <li><a href=" "><img 


src="http://digilander.libero.it/cheza_chan/linkedin_wlb.png" alt="icona 


linkedin" /></a></li>
<li><a href=" "><img 


src="http://digilander.libero.it/cheza_chan/skype_wlb.png" alt="icona skype" 


/></a></li>
<li><a href=" "><img src="http://digilander.libero.it/cheza_chan/google


+_wlb.png" alt="icona google+" /></a></li>
</ul>
 
</div></footer></div>

Grazie in anticipo

[JenniferM]

Sono riuscita a risolvere il problema e mettere tutto sulla stessa riga.
Adesso però il padding si è sfalsato e non riesco ad abbassarlo circa allo stesso livello del menu

[Al_katraz984]

ciao,

ti do un aiutino

<div id="footer">
  <ul id="icon">
  </ul>
  <div id="info">
  </div>
</div> 

#footer {
  margin: 0 auto;
  padding: 0;
  width: 960px;
  height: 150px;
}

#icon {
  float: right;
} 

usi position: relative; un po' troppo e il div "id=footer" puoi anche fare a meno di metterlo se usi direttamente footer


[edit]
cos'è #bot???

[JenniferM]

il tag footer mi serve solo per il posizionamento SEO visto che essendo HTML5 viene letto molto bene.
Ti ringrazio per il consiglio. Eviterò di usare troppo spesso "position:relative" comunque, hai risolto in pieno! Thank you a lot!