CSS without float to implement module center layout

Css

The most common practical layout form: Upper, middle left, middle right, bottom four modules, width 760px, the overall page center.

Structure code, top left right foot four modules are all independent and not nested.

head

left

right

foot

The top is part of the general definition.

#top {height:100px; background: #ccc; width:760px; margin:auto; text-align:center;}

Method A: The outer left is defined to be 760px wide and centered; the inner left_module is defined as the actual left-hand width of 280px and is absolutely positioned, and the top value equals the height defined at the highest level.
The advantage of this approach is that left right two module snippets can be interchanged to adjust display precedence.

#left {width:760px; margin:auto;}
#left_module {width:280px; position:absolute; top:100px; padding:10px;}

Method B: The outer left is defined as 760px wide and centered, relatively floating on top, and the inner left_module is defined as the actual left-hand width 280px, and is absolutely positioned.
The advantage of this approach is that the height of the top can be extended freely.

#left {width:760px; margin:auto; position:relative;}
#left_module {width:280px; position:absolute; padding:10px;}

The outer right is defined as 760px wide and centered, and the inner right_module is defined as the actual right-hand width of 440px, using margin syntax to reside left. The background color defined by Right_module is the actual background color on the right, and the height of the definition is the height of the actual intermediate module;

#right {width:760px margin:auto; background: #E8E8E8;}
#right_module {width:440px; background: #F0F0F0; height:360px; margin:0 0 0 Auto; padding:10px;}

The bottom is also part of the general definition.

#foot {height:100px; background: #ccc; width:760px; margin:auto; text-align:center;}

Test environment IE6.0 and FF1.5, are the most vulgar grammar, very simple, practical limited, can do technical reference.