Question

I have a HTML code like this:

<pre><div class="post" style="border-width:1px;border-style:solid">
 <div class="userpic" style="width:70px;float:left">
  <img src="XXX"><br>some text
 </div><!-- /userpic -->
 <span class="text"><h4>I'm a heading</h4>Just a few words.</span>
</div><!-- /post --> </pre>

Sometimes the picure loaded in the userpic-div is higher than the text in the text-span. The post-div, however, stays as high as the text in it is. Now I want it to be at least as high as the userpic-div. I tried to do that with jQuery, here is what I thought:

$(document).ready(function() {
   var elements = $('.post');
    elements.each(function(){
    userpic = $(this).children('.userpic');

        if($(this).height() < userpic.height()){
        $(this).height() = userpic.height();
            }
    });

 });

I get no Error (in Chrome) but it doesn’t work.

What have I done wrong?

Answer 1

You have floated content which pulls it out of the flow. You need to clear the float to resume normal content flow. Try adding <br style="clear: both" /> to your code, just after the more text.

<pre><div class="post" style="border-width:1px;border-style:solid">
 <div class="userpic" style="width:70px;float:left">
  <img src="XXX"><br>some text
 </div><!-- /userpic -->
 <span class="text"><h4>I'm a heading</h4>Just a few words.</span>
 <br style="clear: both;" />
</div><!-- /post --> </pre>