float right won't work

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">
  <a href="/"><img src="img/twitter.png" width="32" height="32" alt="Twitter" /></a>
  <a href="/"><img src="img/google_plus.png" width="32" height="32" alt="Google" /></a>
  <a href="/"><img src="img/linkedin.png" width="32" height="32" alt="LinkedIn" /></a>
  <a href="/"><img src="img/facebook.png" width="32" height="32" alt="Facebook" /></a>
</div>

Answer 1

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;
}

Answer 2

 clear:both

add the above css in social css