Expand a div vertically upwards and downwards
<p>I have a div which is being dynamically populated based on the rollover which happens on a image. For example:-</p>

<pre><code>&lt;img id="img1" src="img1.gif"/&gt;
&lt;img id="img2" src="img2.gif"/&gt;
&lt;div id="showonimghover"&gt;&lt;/div&gt;
</code></pre>

<p>when I hover on img1 the text description shown is "great image", and when I hover on img 2 , the text description is around 50 lines. I am able to populate and show the <code>div</code> when the hover happens, but I am faced with a task where the <code>div</code> has to be in the center of the page and it has to expand both vertically upwards and downwards proportionately based on the amount of text.</p>
