Reputation: 67
I am trying to position my social icons to the right side of the browser so that when the browser resizes they always stay following to the right side of the browser, Here is a JSfiddle showing what they currently do http://jsfiddle.net/SHHM8/,
<div id="fixedsocial">
<div class="facebookflat"></div>
<div class="twitterflat"></div>
</div>
#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 have tried to float the container named 'fixedsocial' to the right side of the screen using
float:right;
however this doesn't do anything.
So please could you make the icons fixed to the center right side of the browser, Thankyou very much for any help
Upvotes: 4
Views: 13223
Reputation: 75
You need something along the lines off:
.sidebar-wrap{
position: fixed;
width: 60px;
height:250px;
top: 50%;
margin-top: -125px; /* Needs to be half of the height */
}
See this article for more information: Responsive Sticky Social Sidebar
Upvotes: 0
Reputation: 113
It's normal,
margin:30%;
height:200px;
width:60px;
Your #fixedsocial will always follow the top of your browser for 30% of your windows. If you put a fixed margin, your problem will be solved
try
margin-top:150px;
height:200px;
width:60px;
Upvotes: 1
Reputation: 343
What you need is something like:
#fixedsocial {
position: fixed;
right: 0;
top: 50%;
}
Upvotes: 1
Reputation: 38112
Just add right: 0
to your #fixedsocial
div then you're done
#fixedsocial {
top:30%;
height:200px;
width:60px;
position:fixed;
right: 0;
}
Upvotes: 4