CodingForums.com - CSS Ribbon

Hey all, I'm trying to create a ribbon with css like seen on this page: http://www.sitepoint.com/pure-css3-ribbons/

The problem is, instead of it appearing at the edge of a page, I want it to appear at the edge of a div (in this case, col-1) that could appear anywhere on the page. I'm not sure this is possible, but I want to get your thoughts. For starters, I removed the top: 12px. That made a big difference. But it still appears at the edge of the page rather than the div. Any advice?

Code:

h2

{

        position: relative;

        width: 50%;

        font-size: 1.5em;

        font-weight: bold;

        padding: 6px 20px 6px 70px;

        margin: 30px 10px 10px -70px;

        color: #555;

        background-color: #999;

        text-shadow: 0px 1px 2px #bbb;

        -webkit-box-shadow: 0px 2px 4px #888;

        -moz-box-shadow: 0px 2px 4px #888;

        box-shadow: 0px 2px 4px #888;

}

h2:after

{

        content: ' ';

        position: absolute;

        width: 0;

        height: 0;

        left: 0px;

        top: 100%;

        border-width: 5px 10px;

        border-style: solid;

        border-color: #666 #666 transparent transparent;

}



h2:before

{

        content: ' ';

        position: absolute;

        width: 30px;

        height: 0;

        left: -30px;

        border-width: 20px 10px;

        border-style: solid;

        border-color: #999 #999 #999 transparent;

}



.col-1 {

        width: 26%;

        float: left;

        padding-left: 5%;

        padding-bottom: 2%;

}