title: Not able to create equal gap between two div's because of image element inside one of the div
body: <p>Looking at this image might make things clear..</p>
  
  <p><strong><a href="http://jsfiddle.net/sushanth009/w9vad/" rel="nofollow noreferrer">FIDDLE</a></strong></p>
  
  <p><img src="https://i.stack.imgur.com/JGI4A.png" alt="enter image description here"></p>
  
  <p><img src="https://i.stack.imgur.com/rizg2.jpg" alt="enter image description here"></p>
  
  <p>The main container is a div in which there are 5 more div's each of them holding some data.</p>
  
  <p>If the count for that data is 0 then , just display the text . 
  If the count is greater than 0 , then shown count and image nested inside a span and the image and number are clickable...</p>
  
  <p>The second image is to show how the text inside the div is being rendered..</p>
  
  <p>Because of the <strong>image</strong>  in the 3rd and the 5th div's the gap between the div's is not being consistent . Even after setting the image to <code>position:relative</code> and <code>position:absolute</code> , setting the left and top property seems to have no affect .. </p>
  
  <p>Can someone help me out in this context ..</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div id="prop"&gt;
     &lt;div id="lvl1" class="alrt"&gt;
        Missing reads within 1 week : &lt;span data-tr="1"&gt;0&lt;/span&gt;
     &lt;/div&gt;
     &lt;div id="lvl2" class="alrt"&gt;
        Latest reads 1 Week or older : &lt;span data-tr="2"&gt;0&lt;/span&gt;
     &lt;/div&gt;
     &lt;div id="lvl3" class="alrt"&gt;
        Occupied Zero Consumption : &lt;span data-tr="3"&gt;&lt;a&gt;39 &lt;img src="../icon1.png" title="" /&gt;&lt;/a&gt;&lt;/span&gt;
     &lt;/div&gt;
     &lt;div id="lvl4" class="alrt"&gt;
        Negative Consumption : &lt;span data-tr="4"&gt;0&lt;/span&gt;
     &lt;/div&gt;
     &lt;div id="lvl5" class="alrt"&gt;
        Vacant Consumption: &lt;span data-tr="5"&gt;&lt;a&gt;5 &lt;img src="../icon2.png" title="" /&gt;&lt;/a&gt;&lt;/span&gt;
     &lt;/div&gt;
     &lt;div class="msg"&gt;
        *all alerts are based on yesterdays reads
     &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>#prop
  {
      height:55%;
      padding-top:10px;
      border:solid 2px #B2CD48;
      border-radius:10px;
      margin:10px 0 10px 15px;
  }
  
  #prop &gt; .alrt 
  {
      width:80%;
      float:right;
      height:12%;
      font-weight:700;
      font-size:1em;
      color:#42456B;
      padding:3px;
  }
  
  .alrt a 
  {
      cursor:pointer;
      position:relative;
  }
  
  .alrt &gt; span &gt; a &gt; img 
  {
      width:20px;
      height:20px;
      position:relative;
      top:3px;
  }
  </code></pre>