Eugeny89 Eugeny89 - 1 year ago 112
CSS Question

jquery.height() and float parameter in CSS

I'd noticed a strange behaviour of

function. Have a look at the following code.


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


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



The last line outputs
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
function together with
float: left;

Answer Source

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

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download