Question

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

Answer 1

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