DIV Alignment

If you declare in html

<div id='div1'>
   <div id='div2'>
     'coisas aqui'
   </div>

   <div id='div3'>
     'coisas aqui'
   </div>
</div>

Of course you will have the divs arranged the way you put it up there: the divs naturally stay in that rectangular shape, stretching from one end of the screen to the other, and lie one on top of the other.

Now, if you want to set a minimum height for # div1, say 300px, you should put this in your css:

#div1 {
   min-height:300px;
}

For div 3 to always be below div 1, as a footer, you can place it outside and after div 1 - so it will be just below it.

For div 2 to be "over" of div 1, you would need to set position: relative to div 1 and position: absolute to div 2, setting where exactly div 2 would look through the properties: top, left, bottom and / or right. - In the case of your example, bottom: 0; left: 0;

<div id="div1" style="position: relative;">
   <div id="div2" style="position: absolute; bottom: 0; left: 0;"></div>
</div>
<div id="div3">
</div>

All other answers have given very good ways of how you can do this, but here's a working example with some more considerations.

First, I did a reset with a box-sizing: border-box; , its usage is somewhat optional, however, if you want to know more about this property, you can take a look article . It would make the size determinations of the elements already take into account margins, spacing, borders, among other things.

It would look like this:

*{
  box-sizing: border-box;
}

I created a div with the class="container" that will encompass all other div . It will have the following style:

.container {
  height: auto; 
  width: 400px; /* Mude de acordo com o desejado */
  background: #000;
  padding: 5px;
}

In it, just change your width , and everything else will fit.

A div#div1 this style:

#div1 {
  height: auto !important;
  background: #000;
  min-height: 200px;
  position: relative !important;
  color: #fff;
  border: 1px solid #0090ff;
  padding: 10px; /* Margem interna para o texto */
  padding-bottom: 32px;
  margin-bottom: 5px; /* Espaçamento entre o rodapé e o texto*/
}

The padding-bottom is in case the #div2 does not stay on the text. The height: auto will cause #div1 to have a height relative to the size of the text, however the min-height will ensure that this height is not less than 200px (or the value you want).

Already the div#div2 this style:

#div2 {
  width: 50px;
  height: 30px;
  background: #0090ff;
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
}

Thanks to bottom: 0 and left: 0 it will be stuck to the lower left corner of div#div1 .

Finally to #div3 :

#div3 {
   height: 100px;
   width: 100%;
   background: #cf0027;
}

This will move according to the size of #div1 . And the width: 100% will make it the size of div.container .

Complete Code

* {
  box-sizing: border-box;
}

.container {
  height: auto;
  width: 400px;
  background: #000;
  padding: 5px;
}

#div1 {
  height: auto;
  background: #000;
  min-height: 200px;
  position: relative;
  color: #fff;
  border: 1px solid #0090ff;
  padding: 10px;
  padding-bottom: 32px;
  margin-bottom: 5px;
}

#div2 {
  width: 50px;
  height: 30px;
  position: absolute;
  bottom: 0;
  left: 0;
  background: #0090ff;
}

#div3 {
  height: 100px;
  width: 100%;
  background: #cf0027;
}

<div class="container">
  <div id="div1">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin sed efficitur arcu, sed varius eros. Sed gravida dapibus est, ut pretium tortor dapibus id. Praesent ultrices a urna sit amet pellentesque. In at rhoncus justo. Pellentesque pellentesque a
    est quis viverra. Donec vel suscipit magna, ac pharetra augue. Vivamus magna nunc, efficitur sit amet laoreet et, porttitor eu nulla.
    <div id="div2"></div>
  </div>
  <div id="div3">
  </div>
</div>

Example - JsFiddle