Hm, I can see what you want, and the trouble is that because wrap can get smaller than 960, floats would rather drop than compress.
I think as you shrink the browser computes the pixel-width of the 66% width inside1 box and whenever that's larger than 328px + computed-for-inside1, you get float drop.
You probably will have to do something smaller than 66%, and you have to keep in mind the other box takes up 328px in total.
You know what else you could do? You could float inside1 left and give it a right margin of 328px-- exactly the room needed for the other div.
Then maybe place inside2 directly on top of this margin space. Maybe Holy-Grail would work here.
If width of inside1+328px = approx 100% of the total available width, then inside2 (who normally would be forced underneath) could still be floated left and given a negative left margin of -328px so that it wraps around and appears on the other side... the right side... on top of the margin.
Problem there is, as ralph said, a % + px is always tricky. I think Holy Grail might work here because you don't have to always take up exactly 100%, you can get away with something slightly less.
width:960px; margin:0 auto;
border-radius: 0 8px 8px 0;
width: 320px; position:relative; z-index:5; /*320px + 8px = 328px*/
Note: you have waaaay too much "position: something" and z-indexes here.