Set many divs at bottom of aligned divs

Question

Im having trouble with setting divs at bottom inside many aligned divs vertically .

    <p>Top of page</p>
 <div id="container">
 <div class="message">area1</div>
 <div class="message">area2</div>
 <div class="message">area3
    <div class="subarea">subarea3</div>
    <div class="subarea">subarea4</div>
</div>
</div>
<p>Bottom of page</p>

CSS

 #container {
height: 1000px;
}

.message {
height: 80%;
width: 30.6%;
float: left;
border:1px solid red ;
vertical-align: top;
background-color: #D4D0C8;
overflow-x: hidden;
padding-bottom: 120px;
}
.subarea{
padding: 5px;
border-bottom: 1px solid #B9A073;
word-wrap: break-word;
width: 99%;
padding-bottom: 5px;
float: left;
}

Here Jsfiddle demo

It looks like that :

But i want it like that :

I have tried like other posts said:

• set main div to relative and inner div to absolute with bottom 0 , no sucess.

• make main div vertical-align bottom and display table-cell no success

Any help Pls ?

Answer 1

Why don´t you try to wrapper the .subarea and set it with position: absolute; bottom: 0;?

Here is the code working

#container {
    height: 1000px;
}

.message {
    position: relative;
    height: 80%;
    width: 30.6%;
    float: left;
    border:1px solid red ;
    vertical-align: top;
    background-color: #D4D0C8;
    overflow-x: hidden;
    padding-bottom: 120px;
}
.subareas{
  position: absolute;
  bottom: 0;
  width: 100%;
}

.subarea{
  padding: 5px;
    border-bottom: 1px solid #B9A073;
    word-wrap: break-word;
    width: 99%;
    padding-bottom: 5px;
    float: left;
}

<p>Top of page</p>
<div id="container">
	<div class="message">area1</div>
	<div class="message">area2</div>
	<div class="message">area3
        <div class="subareas">
          <div class="subarea">subarea3</div>
          <div class="subarea">subarea4</div>
        </div>
  </div>
</div>
<p>Bottom of page</p>