title: Weird position taken by a div
body: <p>I have a strange situation, where my middle <code>div</code> is slightly downward.
  Here's a screenshot:
  <img src="https://i.stack.imgur.com/ePe8f.png" alt="enter image description here"></p>
  
  <p>HTML :</p>
  
  <pre><code>&lt;div id="footer"&gt;
      &lt;div class="content"&gt;
          &lt;div id="info1"&gt;
              &lt;img src="img/temp.png" alt="About me" /&gt;
              &lt;h4&gt;About Me&lt;/h4&gt;
              &lt;p&gt;this is about me section&lt;/br&gt;and this is the other line&lt;/br&gt;and this is a third line&lt;/p&gt;
          &lt;/div&gt;
          &lt;div id="info2"&gt;                                            
              &lt;h4&gt;Random Photos&lt;/h4&gt;
              &lt;div id="randomPhotos"&gt;&lt;/div&gt;
          &lt;/div&gt;
          &lt;div id="info3"&gt;
              &lt;h3&gt;Follow Me&lt;/h3&gt;
              &lt;div&gt;
              &lt;img src="img/temp.png" alt="facebook" /&gt;&lt;a href="#"&gt;Facebook&lt;/a&gt;
              &lt;/div&gt;
              &lt;div&gt;
              &lt;img src="img/temp.png" alt="twitter" /&gt;&lt;a href="#"&gt;Twitter&lt;/a&gt;
              &lt;/div&gt;
              &lt;div&gt;
              &lt;img src="img/temp.png" alt="email" /&gt;&lt;a href="#"&gt;E-mail&lt;/a&gt;
              &lt;/div&gt;            
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>#info1, #info2, #info3
  {    
      padding: 10px;
      display:inline-block;
  }
  
  #info1
  {
      width:20%;
  }
  
  #info1 img
  {
      margin-right:3px;
      width:20px;
      height:20px;
      background-image:url('../img/glyphicons-halflings.png');
      background-repeat:no-repeat;
      background-position:-162px 1px;
  }
  
  #info1 img, #info1 h4
  {
      display:inline-block;
  }
  
  #info2
  {
      width:55%;
      border-left:1px solid gray;
      border-right : 1px solid gray;
  }
  #info3
  {
      width:15%;
  }
  
  #info3 img 
  {
      width:20px;
      height:20px;
      margin-right:5px;
  }
  
  #info3 img[alt="facebook"]
  {
      background : url('../img/result.png') no-repeat 0px -30px;    
  }
  
  #info3 img[alt="twitter"]
  {
      background : url('../img/result.png') no-repeat 0px -60px;
  }
  
  #info3 img[alt="email"]
  {
      background : url('../img/result.png') no-repeat 0px 0px;
  }
  
  #info2 div 
  {
      padding:3px;
  
  }
  
  #randomPhotos 
  {
      height : 100px;
  }
  </code></pre>
  
  <p>I'm really not that good at CSS, so it maybe a small problem. I just can't find it out.</p>