CSS bottom aligning causing overlapping text - css

Question

I'm having an issue with absolute and relative positing with regard to aligning an element to the bottom of another. I've set this up http://jsfiddle.net/sitrobotsit/xLahG/8/ to illustrate the problem. Basically, the bottom aligned element is overlapping the text above it.
HTML
<div class="subevents">
<ul id="events_gallery">
<li class="events_column">
<img src="http://placekitten.com/130/100">
<h3>Some heading</h3>
<p>Some vairable length text. Sed ut perspiciatis
unde omnis iste natus error sit voluptatem accusantium.</p>
<p class="bottom">Overlapping link</p>
</li>
</ul>
</div>​
CSS
#events_gallery li {
border: solid 1px #999;
list-style-type: none;
position: relative;
width: 295px;
}
#events_gallery li p, #events_gallery li h3 {
left: 139px;
}
#events_gallery li img {
float: left;
}
#events_gallery li .bottom {
vertical-align: bottom;
position: absolute;
bottom: 0;
}

Answer 1

Modify your design like this:
<div class="subevents">
<ul id="events_gallery">
<li class="events_column">
<img src="http://placekitten.com/130/100">
<h3>Some heading</h3>
<p class="content">Some vairable length text. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium. </p>
<p class="bottom">Find out more</p>
</li>
</ul>
</div>​
and the CSS:
#events_gallery li {
border: solid 1px #999;
margin: 0 0 5px 0;
list-style-type: none;
position: relative;
width: 295px;
}
#events_gallery li p, #events_gallery li h3 {
padding: 0;
margin: 0 0 4px 139px;
}
#events_gallery li p.content {
margin-bottom:24px;
}
#events_gallery li img {
float: left;
margin: 0 5px 5px 0;
padding: 2px;
}
#events_gallery li .bottom {
vertical-align: bottom;
position: absolute;
bottom: 0;
}
​

Answer 2

Remove position:absolute from
#events_gallery li .bottom {
vertical-align: bottom;
position: absolute;
bottom: 0;
}
and see it here in action