DIV with height: auto; not adjusted according to the height of the internal DIV

In summary, this happens because the child div is using the float attribute. When using the float attribute, the element is "floating" and therefore the parent (parent) div can not identify the height of the child. Ok, how to solve it? The answer is to use clear: both; .

The most commonly used way today is through the pseudo after element. You create a general class called clearfix , with the following attributes:

.clearfix:after{
    content: "";
    display: table;
    clear: both;
}

So answering your question, it would look like this:

<div class="conteudo-modelo-3-0 clearfix">
  <div class="conteudo-modelo-3-1"></div>
</div>

I created a fiddle to give an example: Example

Credits: link

Use the overflow: auto property.

It will look like this.

.conteudo-modelo-3-0 {
  width:960px;
  height:auto;
  margin: 0 auto;
  overflow: auto;
}
.conteudo-modelo-3-1 {    
  position:relative;
  width:840px;
  height:120px;
  float:right;
  background-color:#666666;
}

<div class="conteudo-modelo-3-0">
  <div class="conteudo-modelo-3-1"></div>
</div>

  

The overflow: auto will only serve when height is not set at a height.