CSS span Positioning issue - html

Question

Postioning span in CSS
I'm creating an example rails site but I'm having trouble on index.html.erb: This is the block of my HTML code(this is an example website so names and stuff are made up, i.e FleetFile is not the name of a real service):
</center>
<span class="socialnet">
Aol
Google+<br>
MySpace<br>
Orkut<br>
Twitter<br>
Facebook<br>
</span>
</aside>
<span class="servsmadebyus">
Free Web Hosting<br>
Cloud Storage<br>
Paid Web Hosting<br>
FleetFile Free FTP Client<br>
FleetFile Premium<br>
</span>
And my CSS:
.socialnet {
text-align: left;
color: #000000;
background-color: red; }
.servsmadebyus {
text-align: right;
color: red;
background-color:blue;
}
As you can see, i want to position my .servsmadebyus span on the right side but that span is staying on the left side. Even when i put text-align:right;, it stays on left side

Answer 1

text-align should be applied in the parent (block) element, not in the span itself.
You will most probably need to wrap those spans in block elements and then float them.
Something like the following code:
html:
<div class="social">
<span class="socialnet">
Aol
Google+<br>
MySpace<br>
Orkut<br>
Twitter<br>
Facebook<br>
</span>
</div>
<div class="serv">
<span class="servsmadebyus">
Free Web Hosting<br>
Cloud Storage<br>
Paid Web Hosting<br>
FleetFile Free FTP Client<br>
FleetFile Premium<br>
</span>
</div>
css:
.socialnet {
color: #000000;
background-color: red; }
.servsmadebyus {
color: red;
background-color:blue;
}
.social{
float: left;
}
.serv{
float: right;
}
/* below is the clearfix hack, read more here: http://css-tricks.com/snippets/css/clear-fix/ */
#wrap:before,
#wrap:after {
content: " ";
display: table;
}
#wrap:after {
clear: both;
}
demo: http://jsfiddle.net/KfDK2/