Dynamically creating concentric div given the inner div
<p>I have  2 divs as :</p>

<pre><code>&lt;div id="outer"&gt;
     &lt;div id="inner"&gt;
     &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>The inner div has some fixed height(H) and width(W) . Initially the "outer" div doesn't<br>
have width and height.Also has same top and left values.(same origin)  </p>

<p>How can I create/place a concentric "outer" div (or make the "outer" div concentric)<br>
with some height OH and width OW ? </p>

<p>The problem is I know W and H (width and height of inner div).</p>

<p>I need the outer div with dimensions OH and OW (width and height of outer div).</p>

<p><strong>Added Edit</strong>:
Is there way to calculate left and top for the outer div instead of doing it the CSS way?</p>

<p><strong>Edit2</strong> : The earlier image was bit misleading. the divs  are more rectangular than square.So the padding left and right are equal  as well as top and bottom but different values.</p>

<p><strong>ie. In some cases , dW is  not equal to  dH</strong> </p>

<p><img src="http://i.stack.imgur.com/anciZ.png" alt="concentric divs"></p>

<p>Added <a href="http://jsfiddle.net/CYjAR/6/" rel="nofollow">Fiddle</a> </p>

<p>Also looking for jquery / js solution.</p>
