Create a fixed text at the bottom of multiple boxes using CSS

I am using CSS to align my text (which is just a "read more" link) at the bottom of my preview article boxes which have a standard height. The "read more" link now show up just below of the teaser text and I need to position it just a few pixels above the bottom line of the article box independently of the text height, like this

___________________________
|开发者_JAVA百科
|
|
|
|
|              read more >>
|___________________________

Can you please give me some ideas or examples ?

Regards, George

Set your article element to have position:relative and then set the read more link to have position:absolute so that you can position it within the article using the bottom/right css properties..

example at http://www.jsfiddle.net/gaby/7bduy/

I haven't used Javascript in a long time, but right on the "Related" section there's a link that may help you: CSS: fixed to bottom and centered

You can look into positioning the text relatively.

in css:

#selectorName{
    position:relative;
    left: 10px;
    top:10px;
    bottom:10px;
    right:10px;
}

this will allow you to move the link around in the box relative to the position where it's supposed to be according to document flow rules.

If your article 'text' is fixed size, do something like this:

<div class="article">
<div class="readmore"><a href="#">read more ></a>
</div>

CSS:

.article 
{
position relative;
width: 300px;
height: 100px;
}
.readmore
{
position:absolute;
z-index:3;
width:50px;
height:25px;
right:0px;
top:280px;
}

...or something like that :)