Using CSS to position an anchor tag within a div

Question

In Wordpress, I am trying to alter some of the standard layout for a given theme using only CSS. The following markup produces a div with all the child elements flowing from the top (as expected).

The issue is that I have 3 of these divs side by side and would like the button (the anchor formatted as a button) to always be at the bottom of each respective div regardless of how many lines of text precede the anchor/button ("Our team... more text" in the example below but much more text for the other 2 divs). The div has a fixed height of 300px. I was hoping to be able to do this with CSS only. I have seen some solutions that wrap the anchor in spans or divs but I really discourage myself from editing theme code. Is there any way to get the anchor positioned at the bottom of the div regardless of the amount of text present?

Edit: This div is only a small part of the content on this given page. It is not the only markup present.

<div class="widget-front">
    <h2>The Team</h2>
    <p class="fp-text-one">Our team ...more text</p>
    <a class="btn btn-primary fp-button" href="http://www.mysite.com/the-team/" title="The Team">Read more ...</a>
</div>

I have a selector:

.widget-front > a {
    XXX
}

which does identify the buttons correctly but I cannot seem to get the anchor/button to be at the bottom of the div ..

For XXX I have tried (and failed)

1. position: absolute;
bottom:0

2. position: relative

3. position: relative
bottom:0

4. vertical-align: bottom

Solution

You have to give your anchor a the rule display: block;. Anchors are inline elements per default.

If you give an element position: absolute, you take it out of so-called normal document flow. It will orientate it starting x and y position from the webbrowser canvas (the document area) or from the nearest parent element having position: relative or absolute assigned to.

See http://www.w3.org/TR/CSS21/visuren.html#box-gen for more-into-detail explanation.