float right won't work - css

Question

I have been trying to float the social icons to the right of the page, but for some reason it won't work.
But the text at the top of the page floats perfectly.
Here is a fiddle:
check it out here
<div class="social">
<img src="img/twitter.png" width="32" height="32" alt="Twitter" />
<img src="img/google_plus.png" width="32" height="32" alt="Google" />
<img src="img/linkedin.png" width="32" height="32" alt="LinkedIn" />
<img src="img/facebook.png" width="32" height="32" alt="Facebook" />
</div>

Answer 1

clear:both
add the above css in social css

Answer 2

try this css
#wrapper {
margin: 0px auto;
width: 940px;
padding: 15px 0px 0px;
position: relative;
text-align: left;
}
#header {
width: 940px;
margin: 0px;
padding: 0px;
background: none repeat scroll 0% 0% rgb(255, 255, 255);
overflow: hidden;
}
#mast-head {
width: 940px;
float: left;
margin: 0px;
padding: 0px 0px 10px;
background: none repeat scroll 0% 0% transparent !important;
position: relative;
}
a.logo-txt {
text-decoration: none;
padding: 0px;
display: block;
float: left;
margin: 0px;
}
a.logo-txt #logo {
margin: 0px;
padding: 0px;
}
.personalisation {
margin: 0px auto;
float: right;
}
.welcome {
font-size: 12px;
font-weight: bold;
}
.social {
margin: 100px 0px auto;
float: right;
width:100%
}
.social a{
float:right;
}
​
#nav{
border:1px solid #ccc;
border-width:1px 0;
list-style:none;
margin-top: 160px;
padding:0;
text-align:center;
}
#nav li{
display:inline;
}
#nav a{
display:inline-block;
padding:10px;
}
#nav ul{
position:absolute;
left:-9999px;
margin:0;
padding:0;
text-align:left;
}
#nav ul li{
display:block;
}