How to make a div grow in height while having floats inside

Question

How can I make a div grow its height when it has floats inside of it? I know that defining a value for the width and setting overflow to hidden works. The problem is that I need a div with the overflow visible. Any ideas?

Solution 1

overflow:auto; on the containing div makes everything inside of it (even floated items) visible and the outer div fully wraps around them. See this example:

.wrap {
  padding: 1em;
  overflow: auto;
  background: silver;
 }
 
.float {
  float: left;
  width: 40%;
  background: white;
  margin: 0 1%;
}

<div class="wrap">
  <div class="float">Cras mattis iudicium purus sit amet fermentum. At nos hinc posthac, sitientis piros Afros. Qui ipsorum lingua Celtae, nostra Galli appellantur. Petierunt uti sibi concilium totius Galliae in diem certam indicere. Ambitioni dedisse scripsisse iudicaretur.</div>
  <div class="float">Mercedem aut nummos unde unde extricat, amaras. A communi observantia non est recedendum. Quisque ut dolor gravida, placerat libero vel, euismod. Paullum deliquit, ponderibus modulisque suis ratio utitur.</div>
  </div>

Solution 2

There's more than one way to clear floats. You can check some here:
http://work.arounds.org/issue/3/clearing-floats/

E.g., clear:both might work for you

#element:after {
    content:"";
    clear:both;
    display:block;
}

#element { zoom:1; }

Solution 3

In many cases, overflow: auto; will be enough, but for the sake of completion and cross browser support, have a look at Clearfix which will do the job for all browsers.

Lets consider the following markup..

<div class="clearfix">
   <div class="content">Content 1</div>
   <div class="content">Content 2</div>
</div>

Along with the following styles..

.content { float:left; }

.clearfix { ..from link.. }

Without the clearfix, the parent div wouldn't have a height due to it's floating children. The clearfix will make the parent consider the floating children.

Solution 4

I figured that a great way to do it is setting display: table on the div.

View more solutions

Comments

[pedrozath]

Yeah, it kinda works, but it has the danger of generating scroll bars.. right?

[JakeParis]

No, not that I know of @pedro. The outer div should just keep expanding to wrap the inner divs. try it in the fiddle, increase the dimensions of the inner divs and see what happens.

[JakeParis]

Clearfix is extra markup. Simply give the parent div the markup overflow: auto;

[Nigel Alderton]

I tried this and a tiny scroll bar about 2em tall appeared on the right of the browser window.

[eggy]

@NigelAlderton this was happening for me because I was forcing the height of the container (where the overflow was added). Fixed it by removing the overflow: auto; from the class, as well as the height selector

[Dan]

The benefit of this approach is that overflow: auto; will clip content (like focus decorations) that overflow outside the element, but this won't.

[Edwin Stoteler]

overflow:auto created a horizontal scrollbar for me, so I couldn't use it. This worked perfectly.

[IAM_AL_X]

Exactly what I was looking for. Applied this CSS to the parent. It expands the height of the parent <div>, so that the floated element remains within it. Elegant, because it clearly states that: "the bottom of the parent must clear the float."