Position fixed element relative to wrapper div HTML CSS - html

Question

I am looking to position the box that is floating on the right of the window on the following page.
http://mikegeorge.org/acej/index.html
I would like to position this relative to the white div with all the text in it, so instead of it being attached to the side of the window, it floats maybe 10-20px away from the content area.
CSS Source
#float-box {
position: fixed;
right: 10px;
top: 100px;
width: 150px;
padding: 10px 5px;
text-align: center;
background-color: #fff;
border: 5px solid rgba(180, 180, 180, .7);
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
display: none;
}
.fb-1 {
height: 62px;
margin-bottom: 10px;
}
.fb-2 {
height: 60px;
margin-bottom: 10px;
}
.fb-3 {
height: 60px;
}
Thanks for your help!

Answer 1

You will need to put social-float inside wrapper div and update its style right:-160px. 160px is the width of social-float and 10px more is extra margin. And don't forget to add position:relative to #wrapper
Please replace social-float css with below
position: fixed;
left: 50%;
top: 100px;
width: 150px;
padding: 10px 5px;
text-align: center;
background-color:
white;
border: 5px solid
rgba(180, 180, 180, .7);
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
display: none;
margin-left: 380px;

Answer 2

Please replace your style for social-float id with this:
#social-float {
background-color: #FFFFFF;
border: 5px solid rgba(180, 180, 180, 0.7);
border-radius: 8px 8px 8px 8px;
display: none;
float: right;
margin-left: 715px;
padding: 10px 5px;
position: fixed;
text-align: center;
top: 100px;
width: 150px;
}

Answer 3

move your div inside #Wraper,
<div id="wrapper">
<p>Curabitur id neque eget justo ultrices semper. Suspendisse eget sapien eros, sed dapibus justo. Fusce ullamcorper, felis vitae consequat malesuada, tortor metus mattis ligula, nec pellentesque nisl sapien vel velit. Sed augue sem, malesuada ut elementum dictum, blandit vitae lorem. Aliquam eu nulla neque, vitae feugiat tortor. In id augue nisl. Donec congue arcu vel mi semper sit amet porttitor tortor condimentum. Donec non eros tempor dolor bibendum venenatis. Donec ornare imperdiet leo, non venenatis odio mollis et. Suspendisse in sapien eu sapien egestas elementum. </p>
<p>Sed cursus consequat euismod. Pellentesque sagittis, odio et luctus sagittis, tellus mauris malesuada leo, in tincidunt nisl urna ac urna. Morbi vestibulum faucibus elit vel volutpat. Aliquam erat volutpat. Donec posuere velit vitae risus mattis molestie. Curabitur posuere egestas justo, quis iaculis leo convallis ut. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Ut tristique augue et leo consectetur in porttitor felis euismod. Aliquam ac mi condimentum arcu euismod molestie.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus porttitor adipiscing turpis, eu tristique tellus congue sit amet. In non ipsum risus. In hac habitasse platea dictumst. Sed eu mauris nulla. Ut vitae arcu urna, eu sodales enim. Curabitur porta elementum diam at adipiscing. Sed consectetur convallis neque, eu fermentum lectus mattis in. Ut tristique feugiat elementum. Quisque rutrum dui quis massa commodo id tempor dui vulputate. </p>
<p>In nisi felis, venenatis at pellentesque et, bibendum eget justo. Sed imperdiet commodo rutrum. Proin massa felis, porttitor et commodo at, semper eu sapien. Curabitur eu neque libero. Proin consequat sagittis felis, ut ultricies orci auctor eget. Sed a vehicula risus. Vivamus nulla nisi, lobortis a semper nec, lobortis vel felis. Cras et sem magna, vel ullamcorper justo. Quisque volutpat massa eget leo blandit ultricies eget non nisl. Nunc vel lacus quis risus placerat consectetur vitae quis lectus. Nullam a ante ut nibh facilisis viverra. Nullam mollis, risus sit amet eleifend mattis, massa lorem tempor mauris, sed dictum nisl enim accumsan velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam in faucibus enim. Nulla at mi orci, vel commodo felis. Donec ac tristique ante. </p>
<p>Nunc eu tellus lectus. Vivamus tellus orci, scelerisque a gravida id, suscipit ut purus. Duis eu elit magna. Mauris quis tellus tellus. Fusce sed lorem in lectus aliquam cursus. Etiam orci lectus, fringilla sed imperdiet id, pharetra ut nisi. In hac habitasse platea dictumst. Vestibulum sed metus vel justo pulvinar vehicula ut lobortis mi. Cras viverra porta enim et malesuada. Quisque ullamcorper justo turpis, eu consequat ligula. Nam eget massa enim, in dictum felis. Nam cursus augue eu augue dignissim venenatis. Vestibulum in dignissim odio. Vivamus pulvinar, diam in tempor varius, tortor dolor tempus arcu, vel fringilla lectus eros at mi. </p>
**<div id="social-float" style="display: block; ">
<div class="sf-twitter">
Yo! Sign up fo' this!
</div>
<div class="sf-facebook">
You know you want to!
</div>
<div class="sf-plusone">
Click Me, Por Favor!
</div>
</div>**
</div>
use below css,
#social-float {
left: 1020px;
top: 100px;
width: 150px;
padding: 10px 5px;
text-align: center;
background-color:
white;
border: 5px solid
rgba(180, 180, 180, .7);
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
display: none;
}