Search code examples
csshtmlpositionalignment

Align ul to bottom in fixed div

I created two ul's in a fixed sidebar. I tried to align to blue ul to the bottom of the fixed div, but it doesn't work.

<div class="sidebar">
<ul style="background:green;">
<li>test</li>
<li>test</li>
<li>test</li>
</ul>
<ul class="align-bottom" style="background:blue;">
<li>test</li>
<li>test</li>
<li>test</li>
</ul>
</div>
<div class="main">
MAIN CONTENT
</div>

.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1;
  height: 100%;
  overflow-x: hidden;
  background: grey;
  width: 150px;
}

.main {
  position: absolute;
  top:0;
  left: 150px;
  z-index: 1;
}

.align-bottom {
  position: relative;
  bottom:0;
  width: 100%;
}

https://jsfiddle.net/fj0b6jx3/6/#&togetherjs=2v1pIMRuTT

Where is my mistake?

Thanks in advance.

Solution

  • Change .align-bottom position from relative to absolute

    .align-bottom {
  position:absolute;
  bottom:0;
  left:0;
  width:150px
}

    https://jsfiddle.net/qnbyxyay/1/