title: CSS: Is it correct that text content of a div overflows into the padding?
body: <p>I expected that the padding inside a div would remain clear of any text. But given the following html/css, the content-text spills out into the padding;</p>
  
  <pre><code>&lt;div class="foo"&gt;helloworld&lt;/div&gt;
  
  .foo {
    float: left;
    overflow: hidden;
    background: red;
    padding-right: 10px;
    width: 50px;
    border: 1px solid green;
  }
  </code></pre>
  
  <p>The text overflows it's 50px size and into the 10px padding. Is that by design? If so it seems pretty dumb - padding isn't padding if it's got stuff in it! Or am I just doing something wrong? </p>
  
  <p>Regards, CSS newbie.</p>