title: How to convert padding bottom on a DIV into negative margin on its containing DIV?
body: <p>So I want a DIV's (splashSquareTitle) padding-bottom to translate into it's containing DIV's (splashSquare) negative margin-top, I'm not sure but is the percentages creating the problem? any help is much appreciated.</p>
  
  <p>I'm not trying to get the DIV's (splashSquareTitle) padding-bottom to swap out to the other DIV's (splashSquare) margin-top, I want it to emulate DIV's (splashSquareTitle) padding-bottom.</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div class="splashSquare"&gt;
    &lt;div class="splashSquareTitle greenBG"&gt;
      &lt;img src="img/placeholder/beach_icon.svg" alt="icon small" /&gt;
      &lt;h5&gt;Playground&lt;/h5&gt;
    &lt;/div&gt;
    &lt;img src="img/placeholder/splash_square_placeholder.jpg" class="splashSquareImage" alt="splash square image" /&gt;
    &lt;div class="splashSquareInfo"&gt;
      &lt;h5&gt;TiPai Playground&lt;/h5&gt;
      &lt;h5&gt;Henderson, Auckland&lt;/h5&gt;
    &lt;/div&gt;
    &lt;div class="splashSquareBuffer"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>.splashSquare{
    float:left;
    position:relative;
    width:50%;
    max-width:320px;
    color:#ffffff;
    border-bottom:1px solid #ffffff;
    -moz-box-shadow:inset 0px 1px #ffffff;
    -webkit-box-shadow:inset 0px 1px #ffffff;
    box-shadow:inset 0px 1px #ffffff;
  }
  .splashSquareTitle{
    float:left;
    width:100%;
    padding-bottom:16%;
  }
  </code></pre>
  
  <p>JQUERY</p>
  
  <pre><code>$(function(){
    var splashheaderheight = $("div.splashSquareTitle").paddingBottom();
    var marginTop = parseInt(splashheaderheight) * -1;
    $("div.splashSquare").css("marginTop", marginTop + "px");
    $(window).resize(function() {
      var splashheaderheight = $("div.splashSquareTitle").paddingBottom();
      var marginTop = parseInt(splashheaderheight) * -1;
      $("div.splashSquare").css("marginTop", marginTop + "px");
    });
  });
  </code></pre>
  
  <p>here's the <a href="http://jsfiddle.net/JAVK/8Z5Ey/" rel="nofollow">jsfiddle</a></p>