css ribbon attaches itself to the wrong div

Question

Straight to the point. The CSS ribbon is supposed to attach itself to the right sidebar div, but it keeps attaching itself to the left one for reasons unknown to me. I've tried pretty much everything but can't figure it out. This must be really easy to someone with a higher understanding of CSS ..so..

Here is the code: http://jsfiddle.net/pcpEK/ And the full preview: http://jsfiddle.net/pcpEK/embedded/result/

Any help is greatly appreciated :)

Answer 1

Add position: relative and padding-top to -

#sidebar {
        float:right;
        width:220px;
        padding:90px 0 0 0;
        position: relative;
    }

Since you have given position: absolute to #ribbon its parent needs to have relative position, because the top and left position of absolute element starts from its parent element which has position: relative.

If the parent element doesn't have relative position the absolute positioned element takes its position from body

DEMO: http://jsfiddle.net/pcpEK/2/