CODEWITHSUNDEEP
htmlcsspositioningcss-position
Mild Fuzz
Mild Fuzz

Reputation: 30691

Using bottom with position relative?

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

The problem is two fold. If I use position: relative, bottom: 0; has no effect. If I use position: absolute, the <li>'s have overlapping widths.

I can fix the first problem by using the top style, but this is not ideal as the text size is unknown, and the top element measure from the top of both elements (so the base of the element would not hit the base unless I knew the font size).

I can fix the second with defined widths, but this will add unwanted white space on elements with shorter titles.

Here is a JSFiddle of the issue.

Upvotes: 4

Views: 16924

Answers (2)

Andres I Perez
Andres I Perez

Reputation: 75379

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

Upvotes: 0

Joe
Joe

Reputation: 82604

Try this bit of CSS:

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

jsFiddle of the working style

Upvotes: 4

Related Questions