Little boxes made of ticky-tacky

by Joe Gillespie — Sep 1, 2002

CSS boxes generally want to stack one on top of the other. When you need to produce multi-column layouts, you can use 'float-left' and they should end up side-by-side instead. Giving each box a 'margin' value takes care of the column gutters. If you wrap the whole lot inside an outer containing box of an appropriate fixed pixel or percentage width and specify 'auto' for its left and right margins, the whole thing should centre nicely on the page - but set the body text-align property to 'center' too for best compatibility across browsers.

You can simulate most table layouts using combinations of stacked boxes (for rows) and nested boxes using float-left (for columns) but by setting negative values, you can make the 'cells' overlap and break out of the rigid grid. The things to watch for here are the discrepancies in how the browsers handle 'inheritance' - that is the feature whereby a 'child' object takes on attributes of the 'parent' - like when you put a box within another box. To be safe, be explicit in specifying things like text-align and font styles.

Don't always assume the default (unspecified) behavior or you will be caught out.

Del.icio.us Digg Technorati Blinklist Furl reddit Design Float