Calculate the height of an element based on the number of rows
<p>I have an element that's height is being calculated by its content (a <code>ul</code>). At the moment the <code>ul</code> has two rows with three items in each. I am setting <code>.element</code>s position on screen using the following CSS;</p>

<pre><code>.element {
position: absolute;
left: 30px;
top: -139px;
}
</code></pre>

<p>The markup for this is</p>

<pre><code>&lt;div class="element"&gt;
    &lt;ul&gt;
        &lt;li&gt;&lt;img src="#" /&gt;Model&lt;/li&gt;
        &lt;li&gt;&lt;img src="#" /&gt;Model&lt;/li&gt;
        &lt;li&gt;&lt;img src="#" /&gt;Model&lt;/li&gt;
        &lt;li&gt;&lt;img src="#" /&gt;Model&lt;/li&gt;
        &lt;li&gt;&lt;img src="#" /&gt;Model&lt;/li&gt;
        &lt;li&gt;&lt;img src="#" /&gt;Model&lt;/li&gt;
    &lt;/ul&gt;
&lt;/div&gt;
</code></pre>

<p>In the future there will a need to add a third row to the <code>ul</code> which means the <code>top</code> positioning I am using will hide this new row (as the element div sits on top of another div), which is far from ideal. </p>

<p>I think i'll need to do this with jQuery, so regardless of how many rows get added, I don't need to change the CSS to fix this.</p>

<p>The WIP jQuery I have this far looks like:</p>

<pre><code>var elemImgHeight = $('.element li img').height();
var toggles = $('.element li');
var numOfRows = math.ceil( toggles.length() / 3 );
var elemTopOffset = numOfRows * elemImgHeight + 10;

    if ($('.element li') =&gt; 7) {
        $('.element').css({ top:elemTopOffset })
    }
</code></pre>

<p>I'm not sure if I am on the right track with this, so could do with some pointers?</p>

<p>Thanks in advance.</p>
