Dynamically change the top margin of a div based on its height
<p>I have a div that is fixed to the side of my web page. I need that div to be centered vertically. Easily accomplished using CSS: (note: the base height of the div is 300px;)</p>

<pre><code>#sidePanel { margin: -150px 0 0 0; top: 50%; position: fixed;}
</code></pre>

<p>The issue I'm having is this sidePanel div holds my site navigation. When the nav opens up to show child elements, it grows in height which messes up the centering. I need some jQuery to re-calculate the height of the sidePanel div and the apply the appropriate negative margin to keep the div centered. Here is the jQuery I was playing with:</p>

<pre><code>$("#sidePanel").css("margin-top", $(this).outerHeight());
</code></pre>

<p>I have not worked on the calculation to set the negaitve margin to half of the height, but this is not giving me the height value I'm looking for. Any suggestions??</p>
