Crazy problem. By adding CSS float the JS doesn't work

HTML & CSS
1

This should return the height of the content:

http://page-test.co.uk/float.html

…but it doesn’t work. If I remove the float:left from the boxes then it works:

http://page-test.co.uk/no-float.html (this works)

The only difference in the two is that the boxes in the working one do not have float:left.

Why? This is crazy. What can do I do about it?

Thanks for looking at my examples.

2

It works as designed though, for this is a CSS problem. A float is removed from the normal flow of a page, so a container that has all of its contents floated results in there being nothing that keep the size of the container open.

This can be resolved by clearing the float, so that the container fully surrounds the floated content too.

The CSS forum is a good place to get further information about this if required.

3

Yes, the easiest way to force the container to wrap around the floated content is to add

#content {overflow:hidden;}