Anchor tags - equal height, still clickable with CSS?

Question

I have a little code on jsfiddle: http://jsfiddle.net/tYrCe/1/ Edit it if you like!

I have 3 buttons with anchor tags. I would like them to be equal in height.

Requirements

• Equal in height
• Independent of content (min-height, not ok)
• The whole link should still be clickable (javascript onclick, not ok)

Answer 1

You can use display: table-cell.

table-layout: fixed evenly distributes the available width between the cells.

Make sure the browser support is acceptable to you: http://caniuse.com/css-table
(I assume no IE6/7 support is fine because you're using outline)

See: http://jsfiddle.net/thirtydot/Ab6bg/

.urls {
    width: 300px;
    background: #fff;
    display: table;
    table-layout: fixed
}
.urls a {
    display: table-cell;
    outline: 1px solid #ccc
}