Eugeny89 Eugeny89 - 2 months ago 6
CSS Question

jquery.height() and float parameter in CSS

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;
?

Answer

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

Comments