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;

<div class="foo">helloworld</div> .foo { float: left; overflow: hidden; background: red; padding-right: 10px; width: 50px; border: 1px solid green; }

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?

Regards, CSS newbie.