title: calc() 100% + #px
body: <p>I'm trying to achieve something I'm not even too sure is possible here.</p>
  
  <p>I'm trying to place a particular drop shadow PNG image under the nav for my site. However I also want to reuse this ability for any object I wish on the site, be it an image, a div or button. Basically use the same shadow image for any object.</p>
  
  <p>Using the css3 <code>calc()</code> function I'm attempting to do height of the object @ 100% + 25px (height of png).</p>
  
  <p>I have tried styling:</p>
  
  <pre><code>height: -webkit-calc(100% + 25px); 
  height:    -moz-calc(100% + 25px); 
  height:      -o-calc(100% + 25px); 
  </code></pre>
  
  <p>But from what I can gather in Firebug 100% + 25px is then the new 100% as this achieves nothing.</p>
  
  <p>I also tried:</p>
  
  <pre><code>height: -webkit-calc(100% + 25px); 
  height:    -moz-calc(100% + 25px); 
  height:      -o-calc(100% + 25px); 
  background-position: 0 -moz-calc(100% + 25px);
  </code></pre>
  
  <p>But no joy here either.</p>
  
  <p>If I use calc(3em + 25px); it works no problem, but this isn't flexible enough to work on any object.</p>
  
  <p>Is this even possible? Am I even making sense?!</p>