The most common form of DIV+CSS Web page layout: 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, non-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 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, and the inner left_module is defined as the actual width of 280px, and absolute positioning, the top value equals the height defined by the top.
The advantage of this approach is that the left-right two module code snippet 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, relative to the top, and the inner left_module is defined as the actual width of 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 layer right_module is defined as the actual width of 440px, with the margin syntax left. The background color defined by Right_module is the background color of the actual right, and the height defined 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 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, are the most vulgar grammar, very simple, practical limited, can do technical reference.
