Question

Since my confusion is better understood when looking at it, I created a fiddle that shows the problem: http://jsfiddle.net/qQS92/3/. Think of it as a tree structure.

The red and blue div obviously don’t have the same width, although I expect them to. What prevents the blue div from using all the width it needs to display the text? I want it to break at the same places the red div breaks.

Here’s another fiddle that animates the problem: http://jsfiddle.net/QPFw8/6/
It seems that the problem is the width of the root div. Is this the intended behaviour?

Answer 1

You can fix it by using right:80px instead of left:-80px.

The problem comes because the right side of the red div is fixed to the right side of the parent. Which happens to be 0px wide, and located 120px to the left of the page.

[Edit]

Oh, your problem was the other way around. In that case you need to use right:-80px instead of left:80px on the blue div.

[/Edit]