title: Wrapper size increases after adding the button
body: <p>I have an image wrapper in which i want to show a button on mouse hover with a black background. I tried to do it but it added a white space to the container at the bottom, i dont know why.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="tour-box-wrapper" style="margin-right:45px"&gt;
      &lt;div class="image-wrapper"&gt;
            &lt;a href="#" class="grayscale"&gt;&lt;img src="http://static.teambuy.ca/deal/540x254/other/28165573-2014-03-03-28144457-boxhouse-10b.jpg" /&gt;&lt;/a&gt; 
            &lt;a&gt;&lt;button type="button" class="view-deal-button"  &gt;View Deal&lt;/button&gt;&lt;/a&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.tour-box-wrapper
  {
  width:45%;
  border: 1px solid #BBB;
  padding:2px;
  background-color: #E7E7E7;
  background-image: -webkit-gradient(linear,left top,left    bottom,from(#FFFFFF),to(#E7E7E7));
  background-image: -webkit-linear-gradient(top,#FFFFFF,#E7E7E7);
  background-image: -moz-linear-gradient(top,#FFFFFF,#E7E7E7);
  background-image: -ms-linear-gradient(top,#FFFFFF,#E7E7E7);
  background-image: -o-linear-gradient(top,#FFFFFF,#E7E7E7);
  background-image: linear-gradient(to bottom,#FFFFFF,#E7E7E7);
  float:left;
  display:block;
  }
  
  .image-wrapper 
  {
  border:1px solid #E0E0E0;
  padding:2px;
  display: block;
  
  }
  
  .image-wrapper img
  {   
  width:100%;
  }
  
  a.grayscale {
  display: inline-block;
  background: black;
  padding: 0;
  }
  
  a.grayscale img {
  display: block;
  }
  
  a.grayscale:hover img
  {
  opacity: 0.5;
  }
  .view-deal-button 
  {
  border: none;
  text-align: center;
  border-radius: 6px;
  text-align: center;
  z-index: 999;
  position: relative;
  left: 343px;
  bottom: 36px;
  background-color: #CD277B;
  padding:6px;
   }
  
  .view-deal-button a
  {
  color:white;
  font-size:14px;
  }
  </code></pre>
  
  <p>Note ignore the Javascript which i know will be used to display button on mouse enter but i just want to fix this extra space below the image and want to bring the button to the bottom right corner of the image.</p>
  
  <p><a href="http://jsfiddle.net/T9ESy/" rel="nofollow">JSFiddle</a></p>