divs won't align despite float:left and display:inline-block - css

Question

I'm trying to have the three <div class="forward-link"> align to be all along the same baseline. I've tried float:left and display:inline-block, but nothing seems to work. Any ideas?
The site is made using php/Wordpress, but below is the rendered HTML and CSS.
Also, http://jsfiddle.net/mugUG/
Rendered HTML:
<div id="landing-content">
<div id="landing-brief">
<ul>
<li>
<h2>Growing Edge Blog</h2>
<p>“Embrace the messy imperfect genius. Seek to be misunderstood by creative minds.” ~Ross Martin One thing I have learned over the years as an entrepreneur is that when I am in my most creative space, I have to release being a perfectionist and jump into my creative messiness. I need to create space that allows [...]</p>
<div class="forward-link">
<p><span style="color:#b8bf33">Continue Reading</span></p>
</div><!-- end forward-link -->
</li>
<li>
<h2>Meet Mary Anne</h2>
<p>Mary Anne is the founder of Growing Edge Coaching™, a coaching and consulting company, where she helps individuals and companies develop powerful strategies to move forward in their life, their work, or their business. Her coaching is founded on her 20 years of experience as a manager and senior leader in non-profits.</p>
<div class="forward-link">
<p><span style="color:#b8bf33">More About Mary Anne</span></p>
</div><!-- end forward-link -->
</li>
<li>
<h2>Recent Tweets</h2>
<div id="twitter-feed">
<ul>
<li>
RT #LollyDaskal: regret is often the result of too many excuses. #leadfromwithin #leadership </li>
<li>
What you do in small doses becomes big doses in your life. </li>
<li>
RT #ThisIsSethsBlog: Seth's Blog: Two kinds of unique http://t.co/1TJ1Vuf9 </li>
</ul>
</div><!-- end twitter-feed -->
<div class="forward-link">
<p><span style="color:#b8bf33">Follow #Growing_Edge</span></p>
</div><!-- end forward-link -->
</li>
</ul>
</div><!-- end brief -->
<div id="landing-social">
<h1>Growing Edge Coaching™ works with individuals and companies to attain positive actions and powerful results in their work and life.</h1>
<div id="icons">
<ul>
<li><img src="http://growingedgecoaching.com/wp-content/themes/twentyeleven/images/facebook.png" alt="Growing Edge Coaching Facebook" id="fb" /></li>
<li><img src="http://growingedgecoaching.com/wp-content/themes/twentyeleven/images/twitter.png" alt="Growing Edge Coaching Twitter" id="tw" /></li>
<li><img src="http://growingedgecoaching.com/wp-content/themes/twentyeleven/images/linkedin.png" alt="Growing Edge Coaching Linked In" id="li" /></li>
</ul>
</div><!-- end icons -->
</div><!-- end social -->
<div id="landing-contact-info">
<p><span>PHONE</span> 917.238-9726 | <span>E-MAIL</span> <span style="color:#333333">maflanagan#growingedgecoaching.com</span></p>
</div><!-- end contact-info -->
</div><!-- end landing-content -->
CSS
/* Landing Content */
#landing-content {
background: #f7f7f7;
clear: both;
margin-top: 40px;
}
#landing-brief {
width: 860px;
margin: 0 auto;
padding-top: 40px;
}
#landing-brief ul li {
display: inline-block;
height: 200px;
width: 250px;
position: relative;
vertical-align: top;
}
#landing-brief ul li:last-child {
padding-right: none;
}
#landing-brief #twitter-feed {
font-family: Verdana, Geneva, Tahoma, sans-serif;
font-size: 75%;
line-height: 1.5;
color: #333333;
margin-left: -28px;
}
#landing-brief #twitter-feed ul li {
padding-bottom: 5px;
}
#landing-brief .forward-link {
position: absolute;
padding-left: 0;
padding-bottom: 0;
padding-top: 10px;
}

Answer 1

So your LI elements are aligned horizontally yeah?
What you want to do is give all of your LI elements an equal height tall enough enough to accommodate the content in each LI.
Then make the LI elements position:relative
Then make the forward-link elements position:absolute, left:0, bottom:0
That should do the trick.

Answer 2

Give your all 3 div different id. 1st 2 div give float as left and third div float as right.
All 3 div put in main div with overflow hidden.

Answer 3

Fiddle
ul {
position: relative;
}
li {
position: static; /* The default if no position property is applied */
padding-bottom: 1.6em;
}
a {
position: absolute;
bottom: 0; /* Or, in the linked Fiddle, 1em to accommodate the padding
on the bottom of the UL tag. */
}
This only works in IE7+ (IE6 doesn't support absolutely positioned elements with only one edge (left, right, top, or bottom) property), and only when the elements are guaranteed to be side-by-side. When an element is absolutely positioned but no edge properties are specified, the browser attempts to put the element where it would be if it didn't have position: absolute;. Giving the element only one edge property (such as bottom: 1em; as in the example) causes the browser to move it from the "default" location to match that single edge property. So left and right can be left as automatically calculated if only top or bottom is specified. See also W3C Wiki: CSS absolute and fixed positioning.
Make the UL tag position: relative;, but the LI tags position: static; (the default value for position, not absolute… absolute elements have no layout, and will require a fixed height on the parent element). Give the LI tags enough padding on the bottom to make space for the content you want at the bottom. In the example above, the content is one line of text, which is about 1.2em for most fonts. I added a bit more padding for spacing in the example, and made it about 1.6em. Then make the A tags position: absolute; bottom: 0; and they will move to the bottom of the nearest positioned ancestor, or in this case the UL tag.