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

Tip: In GWT, VerticalPanel could be replaced with FlowPanel

July 29, 2007

I’ve been fighting with a lot of layout issues over the last few hours that are caused by differences between the way IE and Firefox handle table widths. IE seems to expand tables whether I like it or not, which is a pain. VerticalPanel uses a table to line elements up vertically.

I’ve started trying FlowPanel as an alternative; FlowPanel inserts elements without any wrapping (they just go into the parent element), which means that if any element is a block element, they’ll all be put into blocks and stacked vertically, just like VerticalPanel but without the tables.

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: