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

Asked

Viewed 1,725 times

0

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

See the 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-model-3-0 does not readjust according to the time of Content-model-3-1.

What do I do to fix it?

html css

2 answers

1


In short, this is because the internal div (Child) is using the attribute float. When using the float attribute, the element is "floating" and therefore the parent div (Parent) cannot identify the child’s height (Child). Okay, how do you fix it? The answer is using clear: Both;.

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

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

So to answer your question, that would be:

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

I created a fiddle to set an example: Example

Credits: https://css-tricks.com/snippets/css/clear-fix

  • It’s not easier to use one overflow: auto? .clearfix is a lot overrated but to solve most of it only with overflow.

0

Use the property overflow: auto.

Will stay 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 serve only when the height not at a set height.

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.