Vertical-Align list item to bottom

Question

I've read through plenty of related articles on this site and others and it seems I'm still missing something pretty basic.

I have a parent div and an unordered list. The div has a set height and I want to list items to be inline-line and on the bottom of the parent div.

Thanks!

Fiddle: http://jsfiddle.net/np2qm6rz/1/

<div class="parent">
    <ul>
        <li> Item 1 </li>
        <li> Item 1 </li>
        <li> Item 1 </li>
        <li> Item 1 </li>
    </ul>
</div>
.parent {
    border: 1px solid lime;
    height: 100px;
}
ul {
    border: 1px solid black;
}
li {
    border: 1px solid red;
    display: table-cell;
    vertical-align: bottom
}

score 4 · Accepted Answer · edited May 23 '17 at 12:09

One approach is adding a full-height (pseudo-)element to the .parent to affect the parent's baseline and move the inline level elements to the bottom of the box, Then use vertical-align: bottom declaration in order to keep elements - including letters having descenders - within the parent:

EXAMPLE HERE

.parent:after {
    content: "";
    display: inline-block;
    height: 100%;
    vertical-align: bottom;
}

ul {
    display: inline-block;
    vertical-align: bottom;
}

li { float: left; }

You could refer to my answer for further info:

How to align a label to the "BOTTOM" of a div in CSS?

score 1 · Answer 2 · answered Sep 02 '14 at 19:58

1

JSFIDDLE

Add position:relative to your parent tag and position:absolute; bottom:0px to your list, so it sticks to the bottom of the div.

Edit: Updated jsfiddle link.

answered Sep 02 '14 at 19:58

Kamil

1,987
16
14

Thanks Kamil, I tried going that route, but it causes a whole bunch of bugs down the chain at different breakpoints. I'm only going down that route if it's only the way. – Jason Wagner Sep 02 '14 at 20:00
@JasonWagner, what kind of bugs? Can you add to your question the DOM elements that get the bugs? – 2540625 Sep 02 '14 at 20:02
Maybe, "bugs" is the wrong term. I have other absolutely positions on this section and it would require serious refactoring across multiple breakpoints. – Jason Wagner Sep 03 '14 at 17:00

score 0 · Answer 3 · answered Sep 02 '14 at 20:06

0

you can use

display: table-cell;

on parent div

JS FIDDLE

answered Sep 02 '14 at 20:06

subas_poudel

456
2
17

score 0 · Answer 4 · answered Sep 02 '14 at 20:56

Here is an easier solution using your own code...

Link ->

Here is the CSS

.parent {
    border: 1px solid lime;
    height: 100px;
    display: table-cell;
    vertical-align: bottom;
}
ul {
    display: inline-block;
    display: table-cell;
    border: 1px solid black;
}
li {
    border: 1px solid red;
    display: table-cell;
}

Here is the HTML

<div class="parent">
    <ul>
        <li> Item 1 </li>
        <li> Item 1 </li>
        <li> Item 1 </li>
        <li> Item 1 </li>
    </ul>
</div>

Vertical-Align list item to bottom

4 Answers4