Bottom-aligned links within UL LIs using only percentages?

**Wolf_22** · Apr 4, 2010 16:08

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?

**ralph.m** · Apr 4, 2010 18:43

Originally Posted by Wolf_22

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.

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.

**Wolf_22** · Apr 4, 2010 19:04

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)?

**ralph.m** · Apr 4, 2010 20:26

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:

Code:

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

and then have this in the css:

Code:

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.

**Wolf_22** · Apr 4, 2010 20:44

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...

**ralph.m** · Apr 4, 2010 21:11

Originally Posted by Wolf_22

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...

There is one of those lurking around here, but it's more likely to find you in the CSS forum.

You could PM it if you wanted to.

**Wolf_22** · Apr 4, 2010 21:27

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

**Rayzur** · Apr 5, 2010 20:55

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.

Hi,
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.

Code HTML4Strict:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<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}
 
ul{
    width:75%;
    min-width:420px;
    margin:0 auto;
    padding:0 0 0 1px;
    border:1px solid #000;
    border-left:0;
    background:orange;/*fill in the BG color on li.last*/
    text-align:center;
    overflow:hidden;
}
li{
    float:left;
    width:20%;
    height:5em;
    border-left:1px solid #000;
    margin-left:-1px;
    list-style:none;
}
 
li a {
    float:left;
    width:100%;
    height:100%;
    text-decoration:none;
    background:orange;
}
li a:hover {background:yellow;}
 
li a span{
    width:90%;/*94% total width (leave room for the VISIBLE "b" element)*/
    padding:0 2%;
    display:inline-block;
    vertical-align:bottom;
    background:lime;
    color:#000;
}
li b {
    height:100%;
    display:inline-block;
    vertical-align:bottom;
    background:red;
    /*font-size:0; /*commented out for demo to make 100% high "b" element VISIBLE*/
}
li a:hover span {
    color:#FFF;
    background:#222;
    font-weight:bold;
}
</style>
<!--[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}
</style>
<![endif]-->
 
</head>
<body>
<h1>Vertical Aligning Text within Lists Items</h1>
    <ul>
        <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>
    </ul>
</body>
</html>

**RyanReese** · Apr 5, 2010 20:57

Looking for something like this?
http://www.pmob.co.uk/temp/vertical-align11.htm

**Rayzur** · Apr 5, 2010 21:12

Originally Posted by RyanReese

Looking for something like this?
http://www.pmob.co.uk/temp/vertical-align11.htm

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.

**RyanReese** · Apr 5, 2010 21:16

Originally Posted by Rayzur

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.

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)

User Tag List

Thread: Bottom-aligned links within UL LIs using only percentages?

Thread Tools

Display

Bottom-aligned links within UL LIs using only percentages?

Bookmarks

Bookmarks

Posting Permissions