Keeping a div absolute but also in its parent - html

Question

I have a small link with a thumbnail and an excerpt, using css transitions I want the thumbnail to fade out on hover and the excerpt to appear. I'm using % in oppose to pixels as I want my website responsive, however when I add this to my site the excerpt is spread out the width of the page as it has absolute positioning, below is a jfiddle, could anyone help me?
.col {
width:29%;
margin:0 auto;
}
.post-thumbnail {
position:relative;
float:left;
overflow:auto;
width:100%; height:278px;
background:#2F3B45;
}
.post-thumbnail img {
width:100%; height:223px;
padding:0; margin:0;
transition:opacity 0.3s ease-in-out;
-moz-transition:opacity 0.3s ease-in-out;
-webkit-transition:opacity 0.3s ease-in-out;
-o-transition:opacity 0.3s ease-in-out;
}
.col:hover .post-thumbnail img {
opacity:0;
filter:alpha(opacity=00);
}
.post-excerpt {
width:100%;
z-index:9999;
opacity:1;
filter:alpha(opacity=1);
}
.post-excerpt p {
text-align:justify;
color:#a3aaac;
font-family:'Open Sans', helvetica, arial, sans-serif;
font-size:9pt; font-weight:200;
line-height:18pt;
text-decoration:none; width:100%;
}
.col:hover .post-excerpt {
opacity:1;
filter:alpha(opacity=1);
}
.post-title {
position:absolute;
bottom:0px; left:0px;
width:100%; height:55px;
background:#ff0000; z-index:9999;
text-align:center; line-height:52px;
}
.post-title a {
font-family:'Open Sans', helvetica, arial, sans-serif;
font-size:10pt; font-weight:200;
color:#000; text-decoration:none;
}
.post-more {
position:absolute;
bottom:0px; left:0px;
width:100%; height:0px;
background:#ff0000;
opacity:0.0;
filter:alpha(opacity=00);
}
.col:hover .post-title {
cursor:pointer;
position:absolute;
bottom:0px; left:0px;
width:100%; height:95px;
background:#ff0000; line-height:44px;
}
.col:hover .post-more {
cursor:pointer;
position:absolute;
bottom:0px; left:0px;
width:100%; height:47px;
background:#fff url(http://liamhodnett.com/img/new/read-entry.png)top left no-repeat;
z-index:99999;
}
http://jsfiddle.net/P3k9A/
Thanks guys!

Answer 1

Set the parent to relative, then set the children to absolute.
Here are the ones I changed:
.col {
width:29%;
margin:0 auto;
position:relative; /* <- here */
}
.post-thumbnail {
position:absolute; /* <- here */
top: 0px;
float:left;
overflow:auto;
width:100%; height:278px;
background:#2F3B45;
}
.post-excerpt {
position: absolute; /* <- here */
width:100%;
z-index:9999;
opacity:0;
filter:alpha(opacity=0);
}
I believe this is what you were after: http://jsfiddle.net/P3k9A/1/
(I also changed the opacity to 0 on the excerpt in the fiddle).