Dynamic height based on another element (jQuery)

Question

HTML:

<div class="main" style="float:left">
  lorem ipsum <br />
  lorem ipsum <br />
  lorem ipsum <br />
</div>
<div style="float:right">
  <div class="block">block</div>
  <div class="block">block</div>
  <div class="block">block</div>
</div>

jQuery:

$('.block').height($(".main").height() / (3));

... each block height = height of main / 3

It kindof works but quite inaccurate because height doesn't consider the margin/padding of the .block. How do I subtract the padding/margin either automatically or manually?

Thanks

Answer 1

You may be interested in the outerHeight and outerWidth methods in jQuery

http://docs.jquery.com/CSS/outerHeight

http://docs.jquery.com/CSS/outerWidth

Hope that helps!

Answer 2

You need to use outerHeight

$('.block').height($(".main").outerHeight( true ) / 3); 

EDIT I misread the docs originally, and thought margin was included by default. I was wrong! Be sure to pass true to the outerHeight function to include margin. Thanks @Alex Sexton!