CSS how to postiton div outside main container without it moving over the container on window re-size? [closed]

This question is unlikely to help any future visitors; it is only relevant to a s开发者_开发百科mall geographic area, a specific moment in time, or an extraordinarily narrow situation that is not generally applicable to the worldwide audience of the internet. For help making this question more broadly applicable, visit the help center. Closed 10 years ago.

I have a sharebox(div containing social site links) that I've been using with a fixed position outside the main container. I realized that when I re-size the browser window by dragging the border it causes my sharebox div to move over the top of the container.

I looked through related posts here but don't think they apply to this so sorry if I missed it somewhere.

Here is an example of the problem: http://metrotechpc.net/test/positionedbox.html

Is there a way, preferably with pure css(no javascript) to make the div stay away from the container on browser window re-size so the user has to scroll over to see it?

I've tried giving it padding, margin, different positions(absolute and fixed).

I am actually inserting this code into the top of the page with genisis_hook function on a wordpress page so that may be an issue but getting it to work in a basic html like the example link would be a great help.

Thanks

---

There are a few issues with your CSS:

1. There's a typo in the rule for #container: postition: relative; instead of position: relative;

2. You should move the sharebox div inside the container div.

3. Add position: absolute to the sharebox div's CSS and then specify right: 70px to make it start from the right border.

Lastly, there's another typo in the sharebox's CSS: margin: left:20px; instead of margin-left: 20px