html - unable to position div at bottom of another div -

am trying position div in bottom of div unable that

        <div class="div">             <img src="dual.png"/>             <h1>boot cd or usb drive on pc</h1>             <div>footers</div>         </div> 

css

.div{         float:left;         height:300px;         width:22%;         margin-top:15px;         margin-left:15px;         background-color: #e4f2ff     }     .div img{         width:100%;         height:180px;     }     .div h1{         font-size:20px     }     .div div{         background:red;         float: bottom;         position: absolute;         bottom: 0;     } 

here

jsfiddle

trying make design http://i.stack.imgur.com/cdgky.png can me how position div @ bottom of parent div.. in advance

display:table : http://jsfiddle.net/j1raqvc8/4/

.div {      float:left;      height:300px;      width:22%;      margin-top:15px;      margin-left:15px;      background-color: #e4f2ff;      display:table;  }  .div img {      width:100%;      height:180px;  }  .div h1 {      font-size:20px;      margin:0  }  .div div {      background:red;      display:table-footer-group;  }

<div class="div">      <img src="dual.png" />       <h1>boot cd or usb drive on pc</h1>      <div>footers</div>  </div>

but allow box grow taller 300px if content needs more height http://jsfiddle.net/j1raqvc8/5/ .