CSS DIV sizes and floats

November 18, 2007

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:

Float in a Float

Opera Web Dev Toolbar

October 7, 2007

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.


Drop shadows

July 3, 2007

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