Make an Element overflow to the Left - html

Question

I was wondering how to make the rectangle in this fiddle: http://jsfiddle.net/gztdG/2/ 'overflow' to the left, so that the rectangle aligns to the right edge of the square. A simple question, but I can't figure out how to achieve this with position: absolute. Thanks in advance. Here is the html:
<div id='square'>
<div id='rectangle' />
</div>
And here is the css:
#square {
height:50px;
width:50px;
background:blue;
margin:auto;
}
#rectangle {
width:200px;
height:20px;
background:red;
position:absolute;
}

Answer 1

I think, the correct answer is to set position: relative; on the parent container, then have the rectangle align to the right (see this http://jsfiddle.net/gztdG/5/):
#square {
position: relative; <---
height:50px;
width:50px;
background:blue;
margin:auto;
}
#rectangle {
position:absolute;
right: 0; <---
width:200px;
height:20px;
background:red;
}

Answer 2

Use negative margin, like that:
margin-left:-150px;
http://jsfiddle.net/4qr7z/1/

Answer 3

You could also move the div tags so that the rectangle is not wrapped in the square (unless your design requires it)
<div id='square'></div>
<div id='rectangle'></div>
#square {
height:50px;
width:50px;
background:blue;
margin-left:150px;
overflow:auto;
}
#rectangle {
width:200px;
height:20px;
background:red;
position:relative;
}
This would move the square instead, and use margin-left:150px;
The reason I could imagine this being useful is that pages are loaded from left to right, so if the window is moved, you might experience some displacement, since margin-left:-150px will push it right.