CODEWITHSUNDEEP
htmlcss
user3350338
user3350338

Reputation: 67

Social icons which are fixed to the centre right side of the browser

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/,

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

Answers (4)

Rev Nosky
Rev Nosky

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

FabienHuot
FabienHuot

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

Matt
Matt

Reputation: 343

What you need is something like:

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

Upvotes: 1

Felix
Felix

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

Updated Fiddle

Upvotes: 4

Related Questions