Question: Seems the bottom div is aligned bottom to the page but not to the container div. I need to align the bottom one to the bottom of the container DIV.

Code:

```css
#container {
  border: 1px solid red;
  height: 300px;
}

#top {
  border: 2px solid red;
  display: inline-block;
  vertical-align: top;
  position: absolute;
  top: 0;
}

#bottom {
  border: 2px solid red;
  vertical-align: bottom;
  width: 100px;
  position: absolute;
  bottom: 0;
}
```

```html
<div id="container">
  <div id="top">
    test<br /> test
    <br /> test
    <br /><br /> test test test test<br />
  </div>
  <div id="bottom">bottom</div>
</div>
```

[![enter image description here](https://i.stack.imgur.com/G9qTc.jpg)](https://i.stack.imgur.com/G9qTc.jpg)

Answer: 
Simply give your #container `position:relative;`

```css
#container {
  border: 1px solid red;
  height: 300px;
  position: relative;
}

#top {
  border: 2px solid red;
  position: absolute;
  top: 0;
}

#bottom {
  border: 2px solid red;
  width: 100px;
  position: absolute;
  bottom: 0;
}
```

```html
<div id="container">
  <div id="top">
    test<br /> test
    <br /> test
    <br /><br /> test test test test<br />
  </div>
  <div id="bottom">bottom</div>
</div>
```

Alternatively you could go with **flexbox**:

```css
#container {
  border: 1px solid red;
  height: 300px;
  position:relative;
  display: flex;     /* add this */
}

#top {
  border: 2px solid red;
  position: absolute;
  top: 0;
}

#bottom {
  border: 2px solid red;
  width: 100px;
  align-self: flex-end; /* and this */
}
```

```html
<div id="container">
  <div id="top">
    test<br /> test
    <br /> test
    <br /><br /> test test test test<br />
  </div>
  <div id="bottom">bottom</div>
</div>
```
All you need to set its parent `position:relative` then it will consider its body.

```
 #container {
        border: 1px solid red;
        height:300px;
        position:relaive;
    }

```