Wednesday, August 22, 2007

Nesting and Centering div elements

Designers struggle frequently with proper nesting and centering of div elements. I've found, from reading many sources, the best way to take control of your elements is to surround them completely with a div container.

Div containers can be centered and manipulated just about anyway you see fit. Once the "container" is established, one can have seemingly perfect control of design - whether location of internally nested divs, centering, colors, the list goes on.

I've written about centering before. Recently, for whatever reason, I've had much better success with using this style for centering: margin: 0 auto (this means to make the margin equal 0 on the top and bottom and for the sides (left/right) to be auto aligned. Keeping in mind the clockwise approach to remembering single-line declarations, so the above style can also be written as margin: 0 auto 0 auto, more clearly, margin: W X Y Z, where W=top, X=right-side, Y=bottom, and Z=left-side.