How do I show a handle to indicate to the user that a panel is resizable?

Question

I am trying to make a sidebar that the user can resize to their liking. To show that you are able to resize it, I want to put a handle on it (something similar to how you can drag Stack Overlfow's question box and make it taller).

The problem I run into is that the anchor tags in the sidebar are blocking the handle from being the entire height of the sidebar.

HTML:

<div id = "container">
    <a href="#">Something</a>
    <a href="#">Another thing</a>
    <a href="#">Last thing</a>
    <div id = "handle"></div>
</div>

CSS:

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
}

#container {
    height: 100%;
    width: 250px;
    border: 2px solid black;

    text-align: center;
}

#handle {
    height: 100%;
    width: 2px;
    float: right;
    background-color: red;
}

a {
    display: block;
}

Fiddle: https://jsfiddle.net/un3huxee/1/

The red bar on the right represents the would-be handle, but you can clearly see that there is a visual problem. Is this a matter of changing the position of the sidebar to something else?

Answer 1

You can apply position: relative to the #container element and position: absolute to the #handle element, and add top and right positions.

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
}

#container {
  height: 100%;
  width: 250px;
  border: 2px solid black;
  text-align: center;
  position: relative;
}

#handle {
  height: 100%;
  width: 2px;
  position: absolute;
  top: 0px;
  right: 0px;
  background-color: red;
}

a {
  display: block;
}

<div id="container">
  <a href="#">Something</a>
  <a href="#">Another thing</a>
  <a href="#">Last thing</a>
  <div id="handle"></div>
</div>

---

Or use box shadow instead of an actual element to have minimal interference.

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
}

#container {
  height: 100%;
  width: 250px;
  border: 2px solid black;
  text-align: center;
}

.handle {
  box-shadow: -3px 0px 0 0 #f00 inset;
}

a {
  display: block;
}

<div id="container" class="handle">
  <a href="#">Something</a>
  <a href="#">Another thing</a>
  <a href="#">Last thing</a>
  <!--div id="handle"></div-->
</div>