Element Align Problem - Negative margins, images etc.

[ilya Kraft]

Hello,

I'm trying to make a header that goes outside the borders of my sidebar and has a shadow image that makes it look like it is a book-mark.

Something similar to this: Image Here

Right now I tried my best, but it is not looking correct. here is my code for sidebar and header That I think should work to make this effect, but it isn't.

HTML

<!-- Sidebar -->
<aside id="sidebar">
 
   <!-- header div -->
   <div id="sideProfile">
 
      <!-- Span with image background -->
      <span id="sideHshadow"></span>
 
   </div>
 
</aside>
 
 

CSS

#sidebar {
        padding: 15px;
        width: 400px;
}
 
/*Span with shadow image to make it look like a bookmark */
#SideHshadow {
    height: 6px;
    width: 12px;
    margin: 0 0 -6px 0;
    float: right;
    background: url("../images/sidebar_header_shadow.png") no-repeat;
}
 
#sideProfile {
    background:#333333;
    border-bottom: 1px solid #2d2d2d;
    height: 50px;
    width: 400px;
    margin: 0 -12px 0 0;
 
    box-shadow: 0 1px 2px #77bee6;
    -moz-box-shadow: 0 1px 2px #77bee6;
    -webkit-box-shadow: 0 1px 2px #77bee6;
 
    -webkit-border-radius: 7px 7px 0 7px;
    -khtml-border-radius: 7px 7px 0 7px;
    -moz-border-radius: 7px 7px 0 7px;
    border-radius: 7px 7px 0 7px;
 
 
}