height:auto not working in div

Question

I would like to make this with height:auto;

But height:auto doesn't work

İf I make height:auto inside of whoweare css , look like this;

I should to make height:auto , How can I fix this?

<div class="whoweare">
   <div class = "one-forth">
    <div style="background-image: url(img/puzzle.png)"></div>
    <h3>Profesyonel Çözümler</h3>
    <p class="text-top-reduced">20 yılı aşkın sektör tecrübesiyle Profert size en iyi çözümleri sunar.</p>
</div>

.whoweare{
  width: 70%;
  height: auto;
  background-color: red;
  margin: auto;
  display: block;
}

.one-forth{
  width: 20%;
  height: auto;
  float: left;
  text-align: center;
  margin-left:5%;
  margin-top: 30px;
  background: #F8F8F8;
  border-radius: 10px;
}

.one-forth p{
  margin-top:10px;
  font-size:100%;
  margin-bottom: 10px;

}
.one-forth div{
  width: 70px;
  height:70px;
  margin: auto;
  margin-bottom: 10px;
  margin-top:10px;
  background-size: 100% 100%;  
}

height:auto works perfectly fine. `height:auto` means that the element will have the height equal to the sum of it's children heights. So if your `one-forth` div has height that is bigger than the one you set on `whoweare`, it will overflow. So you need to rethink your layout. Either the height of `whoweare` must be bigger, either some heights from `one-fourth` need to be smaller — Mihai T, Jul 20 '18 at 10:57
You've got a `float: left;` on your `.one-forth` class which will means in the height of an auto height, it doesn't have a height. See https://www.w3schools.com/css/css_float.asp for more info on how it works. — lewisnewson, Jul 20 '18 at 11:00
I would like to, whoweare div wrapes one-forth div when height:auto — Emre, Jul 20 '18 at 11:01
I change my code can you see again? I forget to change whoweare css make height:auto — Emre, Jul 20 '18 at 11:05
you issue is not height, it's float .. height:auto is the default value — Temani Afif, Jul 20 '18 at 11:06
but if I give height:300px to whoweare css is working fine , but if ı add height:auto to whoweare css its not working — Emre, Jul 20 '18 at 11:11
because the issue is not with height :) the issue is with float and height:auto is the default value .. so you don't need to specify it — Temani Afif, Jul 20 '18 at 11:13
Temani is right. Put overflow:hidden; to your whoweare div and you can see your red background — ReSedano, Jul 20 '18 at 11:14

height:auto not working in div

0 Answers0