CSS Ribbon

[javanewbie7]

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?

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%;
}

[VIPStephan]

If that h2 is inside col-1 you might wanna try positioning the h2 absolute and the col-1 relative so that the h2 positions itself relative to the col-1, not the page.