Align DIVs with overflow: auto

user_1288552 0
Viewed 54

I have a list of items, and at the bottom of the list I have a placeholder-item to add it to list above. In my real-life-example I need to show a "+"-icon at the right side. As the scrollbar appears and disappears depending on how many items are in the list, the right side of the DIVs are sometimes not aligned.

I tried to show that with the red and green color. I know I could just give the green DIV a padding; but if the scrollbar is not showing, then the "+"-icons will not be aligned again.

How can I solve this?

<div style="width: 200px;">
  <div style="height: 100px; overflow: auto; background-color: red;">
    <div>Scrollable Item</div>
    <div>Scrollable Item</div>
    <div>Scrollable Item</div>
    <div>Scrollable Item</div>
    <div>Scrollable Item</div>
    <div>Scrollable Item</div>
    <div>Scrollable Item</div>
    <div>Scrollable Item</div>
  </div>
  <div style="background-color: green;">
    <div>Footer Item</div>
  </div>
</div>

css html
2 Answers

You could use position: relative on your items and position: absolute on the div containing the +. You can then position the + in the item using left and top.

.container {
  width: 200px;
}

.scrollable {
  height: 100px; 
  overflow: auto;
  background-color: red;
}

.footer {
  background-color: green;
}

.item {
  position: relative;
}

.plus {
  left: 170px;
  top: 1px;
  position: absolute;
}
<div class="container">
  <div class="scrollable">
    <div class="item">Scrollable Item<div class="plus">+</div></div>
    <div class="item">Scrollable Item<div class="plus">+</div></div>
    <div class="item">Scrollable Item<div class="plus">+</div></div>
    <div class="item">Scrollable Item<div class="plus">+</div></div>
    <div class="item">Scrollable Item<div class="plus">+</div></div>
    <div class="item">Scrollable Item<div class="plus">+</div></div>
    <div class="item">Scrollable Item<div class="plus">+</div></div>
    <div class="item">Scrollable Item<div class="plus">+</div></div>
  </div>
  <div class="footer">
    <div class="item">Footer Item<div class="plus">+</div></div>
  </div>
</div>
<br />
<div class="container">
  <div class="scrollable">
    <div class="item">Scrollable Item<div class="plus">+</div></div>
    <div class="item">Scrollable Item<div class="plus">+</div></div>
    <div class="item">Scrollable Item<div class="plus">+</div></div>
    <div class="item">Scrollable Item<div class="plus">+</div></div>
    <div class="item">Scrollable Item<div class="plus">+</div></div>
  </div>
  <div class="footer">
    <div class="item">Footer Item<div class="plus">+</div></div>
  </div>
</div>

user_166888130

I was able to solve the issue by moving the footer DIV into the overflow-container and then using position: sticky:

<div style="width: 200px;">
  <div style="max-height: 100px; overflow: auto; background-color: red; position: relative;">
    <div>Scrollable Item</div>
    <div>Scrollable Item</div>
    <div>Scrollable Item</div>
    <div>Scrollable Item</div>
    <div>Scrollable Item</div>
    <div>Scrollable Item</div>
    <div>Scrollable Item</div>
    <div>Scrollable Item</div>
    <div style="background-color: green; position: sticky; bottom: 0;">
      <div>Footer Item</div>
    </div>
  </div>
</div>
<br><br>
<div style="width: 200px;">
  <div style="max-height: 100px; overflow: auto; background-color: red; position: relative;">
    <div>Scrollable Item</div>
    <div>Scrollable Item</div>
    <div>Scrollable Item</div>
    <div style="background-color: green; position: sticky; bottom: 0;">
      <div>Footer Item</div>
    </div>
  </div>
</div>

user_12885520
Related