Ayuda con barra de navegación...

[BaByRoDrI]

Hola ando trabajando en un sitio, y la verdad no soy bueno en el diseño :S, así que me pidieron que abajo del header y la publicidad pusiera unos botones para el facebook, twitter, rss y así lo hice... Pero no quedo del todo bien:



Quedo así :S

Bueno solo quiero bajar la barra de navegación para que los botones queden libres, les paso el codigo HTML y CSS:

Código HTML:

<div class="clearfloat">
    <div id="logo" class="left">
    
        <a href="/">
    <img src="images/logo/Logo3.jpg" alt="" height="90px" /></a>
    
    </div>
 
    <div class="right">
        
            
        <script type="text/javascript"><!--
google_ad_client = "pub-8263020497690406";
google_ad_slot = "8360435838";
google_ad_width = 675;
google_ad_height = 90;
//-->
</script>
<script type="text/javascript"
src="[noparse][URL="http://www.forosdelweb.com/view-source:http://pagead2.googlesyndication.com/pagead/show_ads.js"]http://pagead2.googlesyndication.com/pagead/show_ads.js[/URL][/noparse]">
</script>
            </div>
 
    <div id="socialLinks">
        <a href="#" class="linkedin" title="Join us on LinkedIn!">Join us on LinkedIn!</a>
        <a href="#" class="facebook" title="Unete a nosotros en Facebook!">Unete a nosotros en Facebook</a>
        <a href="#" class="twitter" title="Siguenos en Twitter!">Siguenos en Twitter!</a>
        <a href="#" title="RSS" class="rss">Suscribete a nuestro RSS Feed!</a>
    </div>
<!-- End Social Media links -->
 
</div>
 
</div>
 
<div id="navbar" class="clearfloat">
<ul id="page-bar" class="left clearfloat">
<li><a href="/">Home</a></li>
 
<li class="page_item page-item-2 current_page_item"><a href="acerca-de.html" title="Acerca de">Acerca de</a></li>
<li class="page_item page-item-6"><a href="contacto.html" title="Contacto">Contacto</a></li>
 
</ul>
 
<form method="get" id="searchform" action="">
<div id="search">
<input type="text" value="" name="s" id="s" class="field" style="width:125px;" />
<input type="image" src="images/loupe.gif"]images/loupe.gif" style="width:15px;height:14px;"/>
</div>
</form>
</div>
 

Código CSS:

#socialLinks{position:absolute; right:13%; top:105px; padding-left:155px; height:42px}
#socialLinks .linkedin, #socialLinks .facebook, #socialLinks .twitter, #socialLinks .rss{display:block; width:32px; height:32px; float:left; margin-left:5px; text-indent:-9999px}
#socialLinks .linkedin:hover, #socialLinks .facebook:hover, #socialLinks .twitter:hover, #socialLinks .rss:hover{margin-bottom:2px}
#socialLinks .linkedin{background:url(images/ico_linkedin.png) 0 0 no-repeat}
#socialLinks .facebook{background:url(images/ico_facebook.png) 0 0 no-repeat}
#socialLinks .twitter{background:url(images/ico_twitter.png) 0 0 no-repeat}
#socialLinks .rss{background:url(images/ico_rss.png) 0 0 no-repeat}
#navbar{margin:0 auto; padding:0px 10px 0px 10px; text-transform:uppercase; background:#333 url(images/navbar.png) 0 0 no-repeat; width:920px; font-size:10px; border-left:5px solid #fff; border-right:5px solid #fff}
 

Please necesito ayuda ya me desespere editando una y otra vez el CSS :S