Question

This is probably pretty hard to explain, so for good measure, I’ve placed a mock-up on JsFiddle: http://jsfiddle.net/HZpBG/

I have #box-cont with no set height, which usually (at least from my experience anyway), means that it takes the sum heights of all of it’s nested elements + any padding.

However, .valid and .invalid (which as far as I can tell are contained within #box-cont)seem to be running off the bottom, not only of #box-cont but of .box-bottom too.

On to the question, can anyone point out why this is happening?

I’ve gone back and forth in attempt to diagnose what the problem is to no avail :(.

Any help would be greatly appreciated ;)!!

Answer 1

So long as the height is not set explicitly on the div with an id of box-cont, you can simply set: overflow: hidden; JS Fiddle demo.