Shulou(Shulou.com)06/02 Report--

How to realize the central layout of DIV module without float, aiming at this problem, this article introduces the corresponding analysis and solution in detail, hoping to help more partners who want to solve this problem to find a more simple and feasible method.

Here to describe to you how to achieve the central layout of the DIV module without float, here focus on two methods.

Realize the central layout of DIV module without float

The most common DIV+CSS page layout form: top, center left, center right, bottom four modules, width 760px, the overall page center.

Structure code, topleftrightfoot four modules are all independent, not nested with each other.

ExampleSourceCode

< divid= "top" > head < / div > < divid= "left" > < divid= "left_module" > left < / div > < divid= "right" > < divid= "right_module" > right < / div > < / div > < divid= "foot" > foot < / div >

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

The advantage of this approach is that the code snippets of the two modules of leftright can be interchangeable 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 the 760px wide and centered, and relative to the top; inner layer left_module is defined as the actual left width 280px, and is 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 440px, using the margin syntax to the left. The background color defined by right_module is the actual background color on the right, and the defined height is the actual height of the intermediate module; the background color of right is the actual background color on the left.

# right {width:760px;margin:auto;background:#E8E8E8;} # right_module {width:440px;background:#F0F0F0; height:360px;margin:000auto;padding:10px;}

The bottom is also a 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 syntax, very simple, practical limited, can be used as a technical reference.

The answer to the question about how to achieve the central layout of the DIV module without float is shared here. I hope the above content can be of some help to you. If you still have a lot of doubts to be solved, you can follow the industry information channel to learn more about 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.