Center module layout without float

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

StructureCodeThe top left right foot modules are all independent and not nested.

<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 </div>

The top part belongs to the general definition.

# Top {Height: 100px; Background: # CCC; width: 760px; margin: auto; text-align: center ;}

Method A: the outer left is defined as 760px width and centered. The left_module of the inner layer is defined as the actual left side width of 280px and is absolutely located. The top value is equal to the height defined on the top.
The advantage of this method is that the code snippets of the left right module can be exchanged 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 width and centered, which is relative to top. The inner left_module is defined as the actual left side width 280px and is absolutely located.
The advantage of this method is that the height on the top can be freely extended.

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

The outer right is defined as 760px width and centered, and the inner right_module is defined as the actual right side width pixel, which is left using the margin syntax. The background color defined by right_module is the actual background color on the right. The defined height is the height of the actual intermediate module. The right background color is the actual background color on the left.

# Right {width: 760px; margin: auto; Background: # e8e8e8 ;}
# Right_module {width: pixel PX; Background: # f0f0f0; Height: 360px; margin: 0 0 0 auto; padding: 10px ;}

The bottom part is also a general definition.

# Foot {Height: 100px; Background: # CCC; width: 760px; margin: auto; text-align: center ;}

The test environments ie6.0 and ff1.5 are the most common syntax, which is very simple and practical and can be used as technical reference.