Use bottom with relative position?

Question

I am trying to get a series of <a> tags that appear in their parent <li> base.

The problem is twofold. If I use position: relative , bottom: 0; It does not work. If I use position: absolute , <li> have overlapping widths.

I can fix the first problem using the top style, but this is not ideal, since the size of the text is unknown, and the top element is measured from the top of both elements (therefore, the base of the element failed if I do not know the font size).

I can fix the second with certain widths, but this will add unwanted white space for elements with shorter headers.

Here is the JSFiddle problem.

Answer 1

Try this CSS bit:

 #main-menu li a{ display: table-cell; position: relative; vertical-align: bottom; height: 111px; } 

jsFiddle working style

Answer 2

Add the line height value to your style and position "# main-menu li a" respectively, 200px should work.