title: css float and border problem
body: <p>I got this css:</p>
  
  <pre><code>.post-user {
      background:black;
      color:white;
      width:auto;
      float:left;
  }
  .img-side {
       border-style:solid;border-width:medium;width:75px;margin-bottom:2px;
  }
  .top-head {
      background:cyan;
      width:100%;
      height:20px;
      display:block;
  }
  .main-box {
      border-style:solid;
      border-width:1px;
      display:block;
      height:auto;
  }
  </code></pre>
  
  <p>And html looks such :</p>
  
  <pre><code>&lt;div class="main-box"&gt;
      &lt;div&gt;
          &lt;div class="top-head"&gt;&lt;span&gt;At top&lt;/span&gt;
          &lt;/div&gt;
          &lt;div class="side"&gt;
              &lt;div class="img-side"&gt;
                  &lt;img src="http://st2.gsmarena.com/vv/pics/htc/htc-snap-1.jpg" width="75px" height="75px" /&gt;
              &lt;/div&gt;
          &lt;div class="post-user"&gt;User name&lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><a href="http://jsfiddle.net/kritya/PGFTz/" rel="nofollow">demo</a></p>
  
  <p>But the div <code>post-user</code> is going outside the border.
  <br /><br />
  How can i fix it ?
  (P.S. : Its something similar to layout of forums)</p>