Just some things I found out recently about CSS and DIV box sized that really confused the hell out of me until I did:
1. DIV floats always shrink to the size of their contents (like tables do)
2. Float DIVs have a size of zero as far as a non-float DIV is concerned; however, a floating DIV does include both floating and non-floating inner DIVs in its size calculations.
3. If your DIVs are being treated as zero-size, or just zero-height, then keep a sharp eye out for floats! Alternatively, if your floating DIV is enlarging a parent box that you didn’t expect it to, maybe that box is floating.
Here’s a red DIV with a 2px red border that has a floating DIV inside it with a blue border; notice how the red border doesn’t expand to include the inner div:
Here’s a red DIV with a 2px red border that has a floating DIV inside it with a blue border, which has a floating div inside it with a purple border. Notice how the blue border expands to wrap the purple border: