title: Div Bleeding Down Beyond Set Margin In Responsive Design
body: <p>I have set up a few divs on a 'responsive layout' page.</p>
  
  <p>ISSUE:</p>
  
  <p>When the page is scaled down, one of the 'child' divs ('headline') is bleeding down (4px) below it's set margin (bottom: 0;).</p>
  
  <p>Here is the page code, including the CSS:</p>
  
  <pre><code>    &lt;!DOCTYPE html&gt;
      &lt;html&gt;
      &lt;head&gt;
  
      &lt;meta name="" content="text/html; charset=utf-8, width=device-width, initial-scale=1, minimum-scale=1" http-equiv="Content-Type" /&gt;
  
      &lt;title&gt;Page Title&lt;/title&gt;
  
      &lt;style&gt;
  
      body {margin: 0; }
  
      .fixed-ratio-resize {
          max-width: 100%; 
          height: auto; 
          width: auto\9;
      }
  
      .storyWrapper {
          position: relative; 
          max-width: 800px; 
          max-height: 450px;
          border:none;
      }
  
      .leftBtn {
          z-index: 100; 
          position: absolute; 
          width:4%; 
          min-height:30px; 
          padding-left:6px; 
          background: rgba(0, 0, 0, 0.2); 
          bottom:50%;
      }
  
      .leftBtn a{
          float: left; 
          font-family: Arial; 
          line-height:30px; 
          vertical-align:middle; 
          font-size:30px; 
          font-weight:bold; 
          color:white; 
          text-decoration:none;
      }
  
      .rightBtn {
          z-index: 100; 
          position: absolute; 
          width:4%; 
          min-height: 30px; 
          padding-right: 6px; 
          background: rgba(0, 0, 0, 0.2); 
          margin-left: 95.1%; 
          bottom: 50%;
      }
  
      .rightBtn a{
          float: right; 
          font-family: Arial; 
          line-height: 30px; 
          vertical-align: middle; 
          font-size: 30px; 
          font-weight: bold; 
          color: white; 
          text-decoration: none;
      }
  
      .headline {
          position: absolute; 
          width: 98.5%; 
          background: rgba(0, 0, 0, 0.2); 
          padding: 0px 6px 0px 6px; 
          bottom: 0px;
       }
  
      .headline a{ 
          font-family: Arial, Helvetica, sans-serif; 
          line-height: 26px; 
          vertical-align: middle; 
          font-size: 16px; 
          font-weight: bold; 
          color: white; 
          text-decoration: none;
      }
  
      &lt;/style&gt;
  
      &lt;/head&gt;
  
      &lt;body&gt;
  
      &lt;div id="story1" class="storyWrapper"&gt;
      &lt;a href="#"&gt;&lt;img class="fixed-ratio-resize" 
      src="CarouselAssets/carouselImages/green.jpg" width="800px" 
      height="450px" alt=""/&gt;&lt;/a&gt;
      &lt;div class="leftBtn"&gt;&lt;a href="#"&gt;&amp;#8249;&lt;/a&gt;&lt;/div&gt;
      &lt;div class="rightBtn"&gt;&lt;a href="#"&gt;&amp;#8250;&lt;/a&gt;&lt;/div&gt;
      &lt;div id="headline" class="headline"&gt;&lt;a href="#"&gt;THIS IS A REBEL PLANET 
      NEWS HEADLINE FOR THE STORY ABOUT THE COLOR GREEN&lt;/a&gt;&lt;/div&gt;
      &lt;/div&gt;
  
      &lt;/body&gt;
      &lt;/html&gt;
  </code></pre>
  
  <p>Here is a link to the page containing this code: </p>
  
  <p><a href="http://www.rebelplanetnews.com/responsiveTest.html" rel="nofollow noreferrer">http://www.rebelplanetnews.com/responsiveTest.html</a></p>
  
  <p>I need to prevent the child 'headline' div from bleeding down past the parent 'storyWrapper' div when the page is shrunken.</p>
  
  <p>*NOTE: The image used is simply a green jpg image (w 800 X h 450)</p>
  
  <p>Any suggestions are appreciated. Thanks. </p>