CODEWITHSUNDEEP
javascripthtmlcss
NindzAI
NindzAI

Reputation: 580

Div element height is automatically set to zero

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/

Upvotes: 0

Views: 187

Answers (2)

ajp15243
ajp15243

Reputation: 7952

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.

Upvotes: 1

UID
UID

Reputation: 4514

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!

Upvotes: 1

Related Questions