How to realize the central layout of DIV module without float
This article will explain in detail how to achieve DIV module centered layout without float. The quality of the article is high, so Xiaobian shares it with you for reference. I hope you have a certain understanding of relevant knowledge after reading this article.
Div module centered layout without float
The most common DIV+CSS page layout form: top, middle left, middle right, bottom four modules, width 760px, the overall page center.
Structure code, topleftrightfoot four modules are all independent, not nested.
ExampleSourceCode
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.
