align content at bottom of columns

Question

I'm managing a trivial column-splitted section in my website to show the abstract of some content. Each column has got a link at the end. Here's an example: http://jsfiddle.net/CV4Yr/2.

The problem is: how can I align those read-more link at the bottom of the section so that all three of the read-more links line up horizontally? Notice that columns seem to have equal height, but it's just a trick using negative margin.

Of course I can imagine a lot of javascript hacks, but I'd rather avoid them.

Thanks

EDIT: I corrected the link to the right version of the fiddle. Now columns are equal heighted.

so the thing is. you have to set those contents to the bottom of the page? — Kees Sonnema, Jun 25 '12 at 08:24
Here is what I see: http://i.imgur.com/MP4e1.png (Chrome 20b) — kush, Jun 25 '12 at 08:33
@RohitAzad That wasn't the solution, but I used to find my way. Check the answer — balanza, Jun 25 '12 at 09:09
here a fiddle showing the correct result. I achived it displaying articles as 'table-cell'. Do you think it's correct, or exists a better way? http://jsfiddle.net/CV4Yr/13/ — balanza, Jun 25 '12 at 09:13
@PatsyIssa as soon I'll get answered, I'll do it. it's boyscout promise. — balanza, Jun 26 '12 at 09:51
no, because equal height is still achived by playing with background and/or padding. meanwhile, content area is still in the same size, so no way to say the to look at the wrapper and not at its parent — balanza, Jun 26 '12 at 11:59

score 0 · Answer 1 · answered Jun 25 '12 at 09:08

0

Because of the method you've used to make the columns an equal height, placing a link at the bottom is going to be difficult.

If you can find an alternative method, something as simple as this would work added into your existing code:

article {
    position: relative;
    padding-bottom: 30px;
}

article > a {
    position: absolute;
    bottom: 0; left: 0;
    height: 30px;
    padding: 0 10px;
    line-height: 30px;
}

answered Jun 25 '12 at 09:08

will

4,427
6
29
33

But how I get column to be equal eighted? – balanza Jun 25 '12 at 09:12
Here a couple of links to the methods available: http://css-tricks.com/fluid-width-equal-height-columns/ http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks – will Jun 25 '12 at 10:50

align content at bottom of columns

1 Answers1