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;
I just ran into this issue as well and don't like the way it works. No matter how large the cat gets, the padding will always be between it and the box! Therefore, when using overflow: hidden, the content should be hidden when it reaches the padding.
Here's a hack that doesn't work in case you want a border, but might for some (me): use the borders as padding.
helloworld
.foo {
float: left;
overflow: hidden;
background: red;
padding-right: 0; /* Removed the padding. */
width: 50px;
border-right: 10px solid red; /* 10px, background color or transparent. */
box-sizing: border-box; /* I prefer this one too.. */
}