Absolute positioning elements within scrollable div

Question

I'm trying to position divs within a parent div of fixed width and height with overflow: auto so that it'll scroll when the divs within go outside of the div.

I.e. I have a div that is 400px wide and if I set a child div's position to left: 500px i'd like it to be off screen with a horizontal scrollbar on the div.

I've created two examples here

I.e. In example1 the second red div should be half cut off with a horizontal scrollbar kind of like example2 except it is pushed down by the content as it isn't absolutely positioned.

I hope that makes sense.

Answer 1

In example 1, set position:relative on div#main.

You will just need to sort out your top and left-margin on the divs to compensate for it not being relative to the main body (decrease them by 11 pixels or so)