Div element height is automatically set to zero

Question

I have a fairly straight forward layout - main div, which floats left. Within it I nest other div's with style clear both. Here is a simplified version(all items have sub-divs):

<div id="wrapper" class="floatLeft">
    <div id="mainMenu" class="clearBoth">
        <div id="item1" class="clearBoth">
        </div>
        <div id="item2" class="clearBoth">
        </div>
        <div id="item3" class="clearBoth">
        </div>
     </div>
 </div>

 .clearBoth {
      clear: both;
  }
  .floatLeft {
      float: left;
  }

Problem is item3's height is computed to be 0 for whatever reason. All the elements within it spill out into the wrapper div. It looks horrible because main menu div has a background etc. If I add style of "overflow:hidden" to item 3 it looks fine - the question is why? I don't understand why is there an overflow? Most importantly though - why is the height of item3 computed to be 0?

Here is a link to jsfiddle http://jsfiddle.net/uPtCd/

How are we supposed to determine the problem when all you've provided is a bunch of `
`s? — user2736012, Sep 11 '13 at 18:06
`div` elements with no content will have a computed height of zero. The float overflow issues are a separate problem. — Marc Audet, Sep 11 '13 at 18:12
But I do have elements in there, they show up below the main menu. What are the common reasons for overflow if I never explicitly set div's height? — NindzAI, Sep 11 '13 at 18:14
In your question, the divs are empty. In your jsFiddle, they're not. Please read this: http://sscce.org — user2736012, Sep 11 '13 at 18:25
@NindzAI Based on your fiddle, it's due to your `div`s inside of `#item3` also being floated. There's no content within the content flow of `#item3` to use for computing `#item3`'s height because those inner `div`s are floated. — ajp15243, Sep 11 '13 at 18:26
@ajp15243 This indeed fixed it. Thank you. Could you elaborate on why exactly it worked. I don't entirely follow your initial explanation. My basic assumption was that if div contains sub-elements they are going to be taken into account for size calculation. — NindzAI, Sep 11 '13 at 18:31
@NindzAI I posted an answer as an explanation, with a link to another SO question containing solutions. Technically your question is a duplicate :). — ajp15243, Sep 11 '13 at 18:47

score 1 · Answer 1 · answered Sep 11 '13 at 18:44

Just give the <div class="clearBoth"></div> after the the <div>s mentioned in your Item 3

<div style="float:left; width:45%; margin-top:5px"> <span class="label">Laser Power</span>

                <input type="checkbox" class="value lasersetting" id="laserEnable" />
                <label for="laserEnable">On</label>
            </div>
            <div style="float:right; width:55%; margin-top:5px">
                <div style="float:left; margin-left:10px; margin-top:10px" id="laserSlider"></div>
                <input type="text" style="float:center" class="value lasersetting" id="laserValue" value="0" valType="number" min="0" max="100"></input>
            </div>

<div class="clearBoth"></div>

This should fix!

Also just a suggestion, you don't need to give "class="clearBoth" to all parent DIVs. All you need to do to clear the "float" is give an empty DIV with class clearBoth where you FLOATING DIVs Ends. Like we are doing for the above DIVs!

score 1 · Answer 2 · edited May 23 '17 at 12:11

I'm not a CSS expert, so I'll refer you to this SO question. The basic idea is that there's this concept of "flow" in HTML/CSS that determines how content/markup is organized and laid out by an HTML/CSS layout engine. The issue you're having here is that, based on your fiddle, your #item3 contains only floated child elements. Floated elements are removed from "normal flow". When the layout engine in your browser is determining how #item3 should be sized and laid out, it looks for "normal flow" content inside of the element. Finding none, it computes the height to 0. The width follows the rule of block elements since it's a div without a modified display CSS rule.

If you want to keep the child elements of #item3 floated, you can explore some alternate solutions in this (duplicate) SO question. Alternatively, remove the float rules on the child elements.

Note that this concept of "flow" has changed a bit in HTML5 to be a more general concept called Content Models.

Div element height is automatically set to zero

2 Answers2