Bottom-aligned links within UL LIs using only percentages?

I have a UL with some links that I need to have vertically-aligned along the bottom. I doubt this can be done because I have to have the UL and LIs (as well as the links) remain dimensionally elastic using percentages. I feel like I’ve tried everything from adjusting the UL’s line-height to messing with the anchor padding, but nothing I do seems to work. Again, I doubt it can be done, but I wanted to ask the pros around here if they’ve ever had this type of issue and if so, how did you overcome it?

On a side note, is there possibly a way to use “display:table-cell” combined with “vertically-align:bottom” to achieve this? :confused:

That should be fine. This is a CSS issue. If you post some code or a link, we can get it happening.

However, do you really mean “vertically-aligned along the bottom” or “horizontally-aligned along the bottom”? Vertically means one on top of the other.

Thanks for the heads-up on the markup vs. CSS. I guess the reason I posted this in here is because of an issue I went through awhile back with nested inline lists–the only fix was markup-related.

Anyway, if you need to move it, by all means…

As for the alignment clarification, yes, I mean vertically-aligned along the bottom. From what I have experienced, aligning things horizontally seems to be an easier issue to deal with as you can almost always achieve it with things like margin left & right: auto as well as doing the half-hack with absolute (and sometimes, text-align:center depending on the issue).

So I need it to be vertically-aligned ON the bottom of the LI (maybe my use of the word “along” versus “on” helps?). Is there a way this can be done (while maintaining the percentage-based dimensions)?

O, I see, I totally mis-interpreted what you were talking about. I was picturing a list sitting at the bottom of the page or something… Duh.

Well, the only easy trick I can think of is to have an image (whether visible or the same color as the background) at the start of each LI:

<li><img src="image.gif"><a href="#">Link</a></li>

and then have this in the css:

li img {vertical-align:bottom;}

I guess that’s not too satisfying, though, and there’s probably a better way; so I’m sure someone better at CSS will suggest something.

If only there was someone lurking around here who’s, eh, okay at CSS and has a weird, green, nightmarish-bloated-Muppet-looking monster for an avatar…

Thanks for your tip, Ralph. I might do that if I can’t someone who has around 28 thousand posts mostly pertaining to CSS…

There is one of those lurking around here, but it’s more likely to find you in the CSS forum. :wink: You could PM it if you wanted to.

You responded right as I clicked on the button labeled “Help, Paul.”

I have a UL with some links that I need to have vertically-aligned along the bottom. I doubt this can be done because I have to have the UL and LIs (as well as the links) remain dimensionally elastic using percentages.
You can do this with display:inline-block; assigned to a <span> in order to allow it to take on vertical-align:bottom; and dimensions.

Building on Gary T.'s Solution from Quiz-30-B you can do this with percentage widths but you will need to set a defined height on the li for the “b” element to reference from.

Here is what I came up with, maybe it can serve as a starting point for you.

<html lang="en">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Vertical Aligning within Lists Items</title>
<style type="text/css">
h1{padding:20px; text-align:center}

    margin:0 auto;
    padding:0 0 0 1px;
    border:1px solid #000;
    background:orange;/*fill in the BG color on li.last*/
    border-left:1px solid #000;

li a {
li a:hover {background:yellow;}

li a span{
    width:90%;/*94% total width (leave room for the VISIBLE "b" element)*/
    padding:0 2%;
li b {
    /*font-size:0; /*commented out for demo to make 100% high "b" element VISIBLE*/
li a:hover span {
<!--[if lt IE 8]>
<style type="text/css">
li {display:inline;}/*IE6 margin bug*/
li.last {width:19.6%;}/*combat rounding errors*/
li a span {display:inline}

<h1>Vertical Aligning Text within Lists Items</h1>
        <li><a href="#1"><span>long test text</span><b>&nbsp;</b></a></li>
        <li><a href="#2"><span>some longer testing text</span><b>&nbsp;</b></a></li>
        <li><a href="#3"><span>some much longer testing text</span><b>&nbsp;</b></a></li>
        <li><a href="#4"><span>test text</span><b>&nbsp;</b></a></li>
        <li class="last"><a href="#2"><span>some longer testing text</span><b>&nbsp;</b></a></li>

Looking for something like this?

I quoted and bolded the text on the basic requirements that the OP was looking for in my reply above. It is all explained in post #1.

I don’t think you can make the double relative shift vertical-align to the bottom for IE6/7. It handles v-a middle due to the nature of the bug.

You posted yours right before I did, thus missing the OPs requirements (I didn’t examine his post clearly enough to fully grasp all the dynamics)