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"><a href="#">Overlapping link</a></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">
             <a href="#"><img src="http://placekitten.com/130/100"></a>
             <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"><a href="#">Find out more</a></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;
}
​