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

[johnsmith153]

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.

[paul_wilkins]

This should return the height of the content:

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

...but it doesn't work.

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.
http://www.positioniseverything.net/easyclearing.html

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

[ralph.m]

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

#content {overflow:hidden;}