The top is a 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 to be the actual left width of 280px and absolutely positioned, and the top value is equal to the height defined at the top.

The advantage of this approach is that the leftright two module code fragments can be interchanged to adjust 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 freely extended.

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

The outer right is defined to be 760px wide and centered, and the inner right_module is defined to be 440px wide on the actual right, left, using margin syntax. The background color defined by right_module is the background color of the actual right side, and the height defined is the height of the actual 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:000auto;padding:10px;}

The bottom is also a conventional definition.

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

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

About how to achieve DIV module centered layout without float to share here, I hope the above content can be of some help to everyone, you can learn more knowledge. If you think the article is good, you can share it so that more people can see it.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.