Alignment of Divs

Question

I have 3 Div, and I’d like you to be willing as follows:

To Div1 is the div who "holds" the other two. I would like the DIV2 stood over the DIV1 ,superimposing the text. And that the DIV3 remained in the footer behaving according to the size of the DIV2 and of DIV1, for example: the div1 would have a certain "min-height" and if the text was larger than this "min-height" it would normally suit the size of the paragraph

, always adjusting automatically.

Answer 1

If you declare in html

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

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

Naturally you will have the Divs arranged the way you put them up there: the Divs naturally stay in this rectangular format, extending from one end of the screen to the other, and stand on top of each other.

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

#div1 {
   min-height:300px;
}

Answer 2

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

For div 2 to be "on top" of div 1, you would need to set position: relative for div 1 and position: absolute for div 2, defining where exactly div 2 would be 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>

Answer 3

All the other answers gave very good ways of how you can do this, but here’s a functional example with a few more considerations.

First off, I made you a reset with a box-sizing: border-box;, its use is somewhat optional, however, if you wish to know more about this property, you can take a look at in that article. It would cause the size determinations of the elements to take into account by themselves margins, spacings, edges, among other things.

Would look like this:

*{
  box-sizing: border-box;
}

I created a div with the class="container" which will encompass all others 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 suit.

To 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 you want the #div2 does not rest on the text. The height: auto will cause the #div1 has a height relative to the size of the text, however the min-height will take care 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 attached to the lower left corner of the div#div1.

Finally to #div3:

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

This will move according to the size of the #div1. And the width: 100% will make her 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