Implementing centered layout of div module without float_Experience exchange

The most common div css web page layout form: top, center left, center right, and bottom four modules, with a width of 760px, and the overall page is centered.

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

＜div id="top"＞head＜/div＞

＜div id="left"＞
＜div id="left_module"＞left＜/div＞ # ##＜/div＞

＜div id="right"＞
＜div id="right_module"＞right＜/div＞
＜/div＞

＜ div id="foot" >foot

The top is a regular definition.

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

Method A: The outer left is defined as 760px wide and Centered; the inner left_module is defined as the actual left width of 280px, and is absolutely positioned, and the top value is equal to the height defined at the top.
The advantage of this method is that the two module code snippets left and right can be interchanged to adjust the display priority.

#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, floating relative to the top; the inner left_module is defined as the actual left width of 280px, and absolutely positioned.
The advantage of this method 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;}

Outer right It is defined as 760px wide and centered, and the inner right_module is defined as the actual right-side width of 440px, using margin syntax to position it on the left. The background color defined by right_module is the background color of the actual right side, and the defined height is the actual height of the middle module; the background color of right is the background color of the actual left side.

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

The bottom also belongs to the general definition.

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

Test environment IE6.0 and FF1.5, both It is the most vulgar syntax. It is very simple and has limited practicality. It can be used as a technical reference.