I am using `position: absolute;` so my div can be placed at the bottom, but I also need to use `float: left;` so that each new div will be placed next to it, but they are just being placed in the same spot, any suggestions?

```
<!DOCTYPE html>
<html>
<head>
   <style type="text/css">

        .media_container{
                min-width:  800px; max-height: 800px; 
                min-height: 300px; max-height: 300px;
                border: 2px solid #f00; 
                position: relative;
                }

        .media_header{
                min-width:  220px; max-width:  220px;
                min-height: 50px; max-height: 50px;
                border: 2px solid #f00;
                float: left;
                /*position: absolute;*/
                margin-left: 30px;
                bottom: 30px;
                }

    </style>
  <title>Test</title>
</head>

<body>

  <div class='media_container'>

    <div class='media_header'>Header 1</div>
    <div class='media_header'>Header 2</div>
    <div class='media_header'>Header 3</div>

  </div>

 </body>]

```