My goal is to always have my social icons positioned on the right side of the browser, even when it's resized. Check out this JSFiddle for the current behavior: http://jsfiddle.net/SHHM8/.
HTML
<div id="fixedsocial">
<div class="facebookflat"></div>
<div class="twitterflat"></div>
</div>
CSS
#fixedsocial {
top:30%;
height:200px;
width:60px;
position:fixed;
}
.facebookflat {
background:url("http://placehold.it/50x50");
height:50px;
width:50px;
transition:ease 500ms;
background-size:50px;
opacity:1;
}
.facebookflat:hover {
background:url("http://placehold.it/50x50");
height:50px;
width:50px;
background-size:60px;
opacity:0.5;
transition:ease 500ms;
margin-left:-20px;
width:70px;
}
.twitterflat {
background:url("http://placehold.it/50x50");
height:50px;
width:50px;
transition:ease 500ms;
background-size:50px;
opacity:1;
}
.twitterflat:hover {
background:url("http://placehold.it/50x50");
height:50px;
width:50px;
background-size:60px;
opacity:0.5;
transition:ease 500ms;
margin-left:-20px;
width:70px;
}
I've attempted to float the 'fixedsocial' container to the right using
float:right;
But unfortunately, that didn't work as expected.
Could someone assist me with making the icons fixed to the center right side of the browser? Any help would be greatly appreciated. Thank you!