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

Opera Web Dev Toolbar

I just installed this set of menus and a toolbar for Opera and I’m quite pleased. It comes with quick links to reference for HTML, Javascript, and CSS, plus many handy tools on the toolbar for analyzing and validating a web page. I think this will be very useful for anyone doing web development who uses Opera for their browser.

One of the great features about this is the ability click a button to open firefox or opera to the same page. I often have to switch browsers, either for compatibility testing or because of others’ lack thereof, and this is another great feature.

http://operawiki.info/WebDevToolbar

Drop shadows

Drop shadows look nice and are very “Web 2.0” looking.  Here’s a link to what seems like a nice drop-shadow technique:

SEMI-TRANSPARENT DROPSHADOW
FOR MOZILLA/FIREFOX AND INTERNET EXPLORER