How to fix the parent div height zero when it has floated children with CSS?

Sometimes, we want to fix the parent div height zero when it has floated children with CSS.

In this article, we’ll look at how to fix the parent div height zero when it has floated children with CSS.

How to fix the parent div height zero when it has floated children with CSS?

To fix the parent div height zero when it has floated children with CSS, we make the parent element an inline block element.

For instance, we write

<div id="wrapper">
  <div class="content">some text here</div>
  <div class="lbar">some text here</div>
</div>

to add nested divs.

Then we write

#wrapper {
  display: inline-block;
  width: 75%;
  min-width: 800px;
}

.content {
  text-align: justify;
  float: right;
  width: 90%;
}

.lbar {
  text-align: justify;
  float: left;
  width: 10%;
}

to make the wrapper div an inline block element with display: inline-block; so that it has a non-zero height.

Conclusion

To fix the parent div height zero when it has floated children with CSS, we make the parent element an inline block element.