Is this a good way to put scrolling social bar on my website?

Question

I'm coding my own scrolling social bar but i'm nut sure about method I'm using. As you can see on the pic above, I had put a wider grey div inside the narrower content div. Then I've set grey's one a css to make it's z-index less than the content z-index. It works ok and following content once I scroll the website but my question is - is this a good method to place a bar like this? Maybe there is an easier solution and better for browsers compatibility, isn't it?

Sincerely, Matt

Answer 1

You can just have the size of the DIV cut down to less space and than make it postion:fixed so that it moves with the scroll.

Fiddle

HTML

<div id='div1' align='center'>
    <span id='grey'>Like</span><br>Tweet<br><span id='grey'>Share</span>
</div>
<div id='div2' align='center'>Content</div>

CSS

#div1 {
    position:fixed;
    top:30px;
    left:5px;
    background:yellow;
    height:60px;
    width:50px;
    border:4px ridge black;
}
#div2 {
    height:800px;
    width:200px;
    background:orange;
    margin-left:60px;
}
#grey {
    background:grey;
}