Geek Answers Handbook

CSS jquery.height () and float options

I noticed the strange behavior of the jquery.height() function. Take 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 prints 0 if I have float: left; in the CSS file, and gives the real height if I remove float: left; . What is the reason for this behavior? Can I use the height() function along with float: left; ?

+7
source share
6 answers

When float elements are inside the container, this element does not apply the height of the container, because the element is no longer in the "stream". It is removed from the current element and parent is applied to it, hence the problem. You can fix this using either inline-block or clear: both

+6
source

Usually I use an element of height 0 that clears as the last child in the container. This causes the container to “stretch” around floating objects:

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

This is an option in the QuirksMode article and has good browser compatibility.

I rewrote 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 demo can also be viewed on the JSFiddle .

+3
source

because floats removes an element from a regular stream. try using overflow:hidden

see DEMO

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

+2
source

floats removes an element from space, so it takes 0 space. So, height() is the space that takes up 0

+2
source

In jQuery, the test script looks like this:

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

if you change the html to clear the float, the parent will get the height:

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

I had the same problem when I used float to better position elements. If you (like me) know in advance what the exact content of the element is, you can add the height attribute with a value (for example, height: 30px ) to your CSS class, so the jQuery .height() method works.

0
source

More articles:


All Articles