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)
-
position: absolute;
bottom:0
-
position: relative
-
position: relative
bottom:0
-
vertical-align: bottom
You have to give your anchor
a
the ruledisplay: block;
. Anchors areinline
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 havingposition: relative
orabsolute
assigned to.See http://www.w3.org/TR/CSS21/visuren.html#box-gen for more-into-detail explanation.