jquery.height() and float parameter in CSS

Question

I'd noticed a strange behaviour of jquery.height() function. Have a look at the following code.

CSS:

div.text-field {
    font-family: sans-serif;
    margin: 3px;
    float: left;
}

HTML:

<div id="someid">
  <div class="text-holder">
    <div class="text-field">text here</div>
  </div>
</div>

JS:

console.log($("someid").find("text-holder").height());

The last line outputs 0 if I have float: left; in CSS file, and otputs real height if I remove float: left;. What is the reason of such a behaviour? Can I use height() function together with float: left;?

because `floats` remove the element from the normal flow. try using `overflow:hidden` — GajendraSinghParihar, Dec 12 '12 at 16:03
You should see [this][1]! Your question will completely answer there! [1]: http://stackoverflow.com/questions/218760/how-do-you-keep-parents-of-floated-elements-from-collapsing — Soroosh Noorzad, May 16 '15 at 15:17
Just to give a direct solution/ hack to fetching the correct height in javascript for an unfloated parent with floated descendants: set parent as floated in javascript, get height (A), unset parent as floated, get height (B), The actual height = `max(A, B)`. — Geert-Jan, Sep 28 '16 at 14:56

score 6 · Accepted Answer · answered Dec 12 '12 at 16:06

When float elements are within a container, that element does not apply the height of the container, because the element is no longer in the "flow". It is removed from the current element, and applied to it's parent, hence the issue. You can fix it by using either inline-block, or clear: both

Jordan Mack · Answer 2 · 2012-12-12T16:33:40.593

I usually use a 0 height element with clear both as the last child in the container. This causes the container to "stretch" around the floating objects:

<div style="clear: both; line-height: 0; height: 0;">&nbsp;</div>

This is a variant on the QuirksMode article, and has good cross browser compatibility.

I've rewritten your code to include it and demonstrate the results:

<html>

<head>
<title>test</title>
<style type="text/css">
div.text-field
{
    border: 1px solid red;
    font-family: sans-serif;
    margin: 3px;
    float: left;
}

div.text-holder
{
    border: 1px solid blue;
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
    $("#output1").text($("#someid1 .text-holder").height());
    $("#output2").text($("#someid2 .text-holder").height());
});
</script>
</head>

<body>

<div id="someid1">
  <div class="text-holder">
    <div class="text-field">text here</div>
  </div>
</div>
<br>
<div id="output1">&nbsp;</div>

<br><br><br>

<div id="someid2">
  <div class="text-holder">
    <div class="text-field">text here</div>
    <div style="clear: both; line-height: 0; height: 0;">&nbsp;</div>
  </div>
</div>
<br>
<div id="output2">&nbsp;</div>

</body>

</html>

The demonstration can also be viewed on JSFiddle.

GajendraSinghParihar · Answer 3 · 2012-12-12T16:11:28.630

2

because floats remove the element from the normal flow. try using overflow:hidden

see the DEMO

for more details http://www.quirksmode.org/css/clearing.html

edited Dec 12 '12 at 16:11

answered Dec 12 '12 at 16:06

GajendraSinghParihar

9,051
11
36
64

score 2 · Answer 4 · answered Dec 12 '12 at 16:08

2

floats removes element from the space therefore it occupies 0 space. So height() is space it takes up that is 0

answered Dec 12 '12 at 16:08

cjds

8,268
10
49
84

score 2 · Answer 5 · answered Dec 12 '12 at 16:12

In jQuery the test script looks like:

console.log($("#someid").find(".text-holder").height());

if you modify the html to clear the float, the parent will gain height:

    <div id="someid">
        <div class="text-holder">
            <div class="text-field">text here</div>
            <div style="clear: both;"></div>
        </div>
    </div>

score 0 · Answer 6 · answered Sep 22 '16 at 21:47

I had the same issue where I was using float for better element positioning. If however you (like me) know beforehand what the exact contents of the element will be, you can add a height attribute with a value (e.g. height: 30px) to your CSS class, so the jQuery .height() method does work.

jquery.height() and float parameter in CSS

6 Answers6