Question

I currently have two side-by-side divs, each set to the width of the page so that I can scroll sideways. The right-hand div needs to peek exactly 40px over into the left side so it’s visible on page-load. I’ve managed (with a lot of help) to get that part fine – the issue now is that there is a 40px gap between the edge of the right-hand div and the edge of the page – illustrated below:

jsFiddle

Any ideas on how to get rid of it? Thanks a lot for any help. The ‘peek’ area has to stay exactly 40px, so using percentages seems to be an issue. Oh, and for an example of how this would look in vertical form, here’s an example.

Cheers.

Answer 1

You’re container has 200% width and is causing the expanding problem.

You need to reduce its size. It’s a bit difficult because your width are in % and your negative offset is in px.

What you could do is change the offset to percentage and take that out of the container.
You will also need to use margin-left rather than left.

This works for me in chrome inspector:

#wrapper {
  width: 199%;  /* change here */
  position: relative;
}

#right {
  float: right;
  width: 50%; 
  background-color:cyan;
  position: relative;
  margin-left: -1%; /* and here */
}

Fiddle: http://jsfiddle.net/hUyBq/

*Edit: * 1% is an example, you might want more. update the wrapper accordingly

*Edit: * Solution using JS: http://jsfiddle.net/bendog/wP4zb/