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

Mozilla/Firefox/Gecko focus box resizing fix

July 28, 2007

I had an element which was focussable, but firefox resized it larger in order to display the focus rect, which caused scroll bars to appear and other annoying side-effects.

Here’s a piece of css which puts the focus rectangle inside the box, and in doing prevents the box from growing and changing the layout:

-moz-outline-offset: -1px !important;

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: