Jakob Abfalter Jakob Abfalter - 5 months ago 14
CSS Question

Span wont work properly

I have a Top Navigation where I want a part of the navigation to be on the left side and another part to be on the right side. I've been sitting a while now and don't get it. I don't see why it won't work here is my code:

<div id="overhead">
<div id="overheadText">

<!-- Home -->
<a href="index.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Home','','Images/List/diverse/home_mo.png',1)"><img src="Images/List/diverse/home.png" alt="Home" name="Home" width="65" height="30" border="0" id="Home" /></a>
<!-- Request Streams -->
<a href="RequestStream.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('RequestStream','','Images/List/diverse/requestStream_mo.png',1)"><img src="Images/List/diverse/requestStream.png" alt= "RequestStream" name="RequestStream" width="113" height="30" border="0" id="RequestStream" /></a>
<!-- About&Contact -->
<a href="AboutContact.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('AboutContact','','Images/List/diverse/AboutContact_mo.png',1)"><img src="Images/List/diverse/AboutContact.png" alt="About&amp;Contact" name="AboutContact" width="113" height="30" border="0" id="AboutContact" /></a>
<!-- Play LoL -->
<a href="http://www.leagueoflegends.com" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Lol','','Images/List/diverse/Lol_mo.png',1)"><img src="Images/List/diverse/Lol.png" alt="Play LeagueofLegends" name="Lol" width="160" height="30" border="0" id="Lol" /></a>

<!-- All links following should be rightsided (But wont work) -->

<span style="text-align:right">
<!-- Facebook -->
<a href="http://www.facebook.com" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('FB','','Images/List/diverse/fb_mo.png',1)"><img src="Images/List/diverse/fb.png" alt="Facebook" name="FB" width="31" height="30" border="0" id="FB" /></a>
<!-- Twitter -->
<a href="http://www.twitter.com" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Twitter','','Images/List/diverse/tw_mo.png',1)"><img src="Images/List/diverse/tw.png" alt="Twitter" name="Twitter" width="31" height="30" border="0" id="Twitter" /></a>
</span>

</div>
</div>


Any ideas??

Answer

It can't work because your span is an inline html component. So it takes the width of its children.

You can use float: right; style. It should works better.