Only show div if enough space to do so
<p>I'm looking for a solution to only display a div if there is space to do so.</p>

<p>On my blog's post pages I display latest posts in the left sidebar, like so...</p>

<p><a href="http://nonaynever.net/12286/manager-vacancy-a-long-shortlist/" rel="nofollow">No Nay Never post page</a></p>

<p>I want to show a different number of sidebar items dependent on how long the post is. Currently I have three divs displaying different numbers of items and run this script.</p>

<pre><code>    if ($("#contentheight").height()&gt;960 &amp;&amp; $("#contentheight").height()&lt;1200) {
  document.getElementById("threeposts").className += "hide";
}
else if ($("#contentheight").height()&gt;1200 &amp;&amp; $("#contentheight").height()&lt;1880) {
  document.getElementById("fiveposts").className += "hide";
}
else if ($("#contentheight").height()&gt;1880) {
  document.getElementById("sevenposts").className += "hide";
}
</code></pre>

<p>However, this is hardly convenient and for very short posts it shows no items at all.</p>

<p>Is there a workaround whereby I can, for example, code for 7 items, but only show as many as the parent div can take? I tried using overflow:hidden but then you end up with the end item chopped in half.</p>

<p>For example, if there is enough room for three full items, they would be shown but any after that would not.</p>
