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 is inaccurate because height doesn’t consider the margin/padding of the .block. How do I subtract the padding/margin either automatically or manually?

Answer 1

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!