title: Weird Bug with Border/Outline/Margin/Padding
body: <p>HTML (3x times):</p>
  
  <pre><code>&lt;div class="scream"&gt;
    &lt;div class="author"&gt;
      &lt;img src="avatars/dagrevis.png" alt="" title="daGrevis" /&gt;
    &lt;/div&gt;
    &lt;div class="data"&gt;
      &lt;span&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry...&lt;/span&gt;
    &lt;/div&gt;
    &lt;div class="clearer"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.scream {
    background: #F4F4F4;
    width: 944px; height: 48px;
  }
  
  .scream .author {
    float: left;
  }
  
  .scream .data {
    float: left;
  }
  
  .clearer { clear: both; }
  </code></pre>
  
  <p>This is how it looks on my browser:</p>
  
  <p><img src="https://i.stack.imgur.com/JfzYM.png" alt="My situation."></p>
  
  <p>As you can see, <code>height</code> is set to 48px. Images size is 48px as well. How it comes that I don't see each <code>div.scream</code> in separate line? If I set <code>height</code> to 50px, for example, all works! In my opinion, it's because there are some-kind of border/outline/margin/padding that ruin my life. Unfortunately, with FireBug I don't see anything like that...</p>