Implementing module center layout without float_CSS/HTML

Achieve centered module layout without float_CSS/HTML

The most common and practical layout form: top, center left, center right and bottom four modules, width 760px, overall page Centered.

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

＜p id="top"＞head＜/p＞
＜p id="left"＞  ＜p id="left_module"＞left＜/p＞＜/p＞
＜p id="right"＞  ＜p id="right_module"＞right＜/p＞＜/p＞
＜p id="foot" ＞foot＜/p＞

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 wide and centered; the inner left_module is defined as the actual left width of 280px, and is positioned absolutely, and the top value is equal to the height defined at the top.
The advantage of this method is: the code snippets of the two modules 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 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;}

The outer right is defined as 760px wide and centered, and the inner right_module is defined as the actual right width of 440px, using margin syntax to be centered 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;}

Bottom also falls under the conventional definition.

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

The test environments IE6.0 and FF1.5 have the most vulgar syntax, which is very simple and has limited practicality. It can be used as a technical reference.

The above is the content of implementing module center layout_CSS/HTML without float. For more related content, please pay attention to the PHP Chinese website (www.php.cn)!