Social icons that are attached to the center right side of the browser

Question

I'm trying to place my social icons on the right side of the browser so that when you resize the browser they always remain on the right side of the browser. Here is a JSfiddle showing what they are currently doing 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 tried putting a container named "fixedsocial" on the right side of the screen using

float:right;

however, it does nothing.

So, please, can you make the icons fixed on the right side of the browser window, thank you for your help

Answer 1

Just add right: 0to your #fixedsocialdiv then you are done

#fixedsocial {
    top:30%;
    height:200px;
    width:60px;
    position:fixed;
    right: 0;
}

Fiddle

Answer 2

- :

#fixedsocial {
  position: fixed;
  right: 0;
  top: 50%;
}

Answer 3

,

margin:30%;
height:200px;
width:60px;

Your #fixedsocial will always follow the top of your browser for 30% of your windows. If you establish a fixed stock, your problem will be solved.

to try

margin-top:150px;
height:200px;
width:60px;

Answer 4

You need something along the lines of:

.sidebar-wrap{
    position: fixed;    
    width: 60px;
    height:250px;
    top: 50%;
    margin-top: -125px; /* Needs to be half of the height */
}

Run codeHide result

See this article for more information: Responsive Sticky Social Sidebar