CSS DIV sizes and floats

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:

Float

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:

Float in a Float
Advertisements

One Response to CSS DIV sizes and floats

  1. Dan says:

    Good post, thanks

%d bloggers like this: