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

0

I have a DIV with height: auto; that does not adjust the height according to an internal div with height: 120px;

See CSS

.conteudo-modelo-3-0 {
width:960px;
height:auto;
margin: 0 auto;
}

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

The DIV content-template-3-0 does not readjust according to the height of content-template-3-1 .

What do I do to fix this?

    
asked by anonymous 05.02.2016 / 11:11

2 answers

1

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

    
05.02.2016 / 11:44
0

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.

    
05.02.2016 / 11:45