Typical three-row, two-column center height Adaptive Layout _ CSS/HTML

A typical three-row, two-column center height Adaptive Layout: How to center the entire page content and how to automatically scale the highly adaptive content. This is the most common problem in CSS layout learning. The following is a practical example and detailed explanation. (The experience in this article is discussed by xpoint and guoshuang in the blue ideal forum .)

First, let's take a look at the actual running effect. This page can be adaptive to the center and height in mozilla, opera, and IE browsers. Let's analyze the Code:

Complete code

Header

Class = "text"> right

1

1

1

1

1

Left

Footer

Code Analysis

First, we define the body and the first line at the top # header. The key here isText-align: center;AndMargin-right: auto; margin-left: auto;To center the header. Note: in fact, the definition of text-align: center; is already centered in IE, but it is not valid in mozilla. You need to set margin: auto; to center in mozilla.

Next, define the two columns in the middle: # right and # left. To center the middle two columns, We nest a layer # contain outside them and set margin: auto; For contain, so that # right and # left are naturally centered.

Pay attention to the order defined by the two columns in the middle. We first define # right, throughFloat: right;Float it to the rightmost of the # contain layer. Then define # left.Float: left;Let it float at the left of the # right layer. This is the opposite of the order defined in the previous table from left to right (Correction: either left, right, or right, right, and left can be implemented as needed ).

We can see that a layer # mainbg is nested between the # contain and the two columns in the code. What is the purpose of this layer? This layer is used to define the background of # contain. You will certainly ask, why do we need to set multiple layers instead of defining the background in # contain? This is because the background defined directly in # contain cannot be displayed in mozilla, and the height value must be defined. If the height value is defined, # The right layer cannot automatically scale according to the content. To solve the background and height problems, you must add such a # mainbg layer. TIPS: # mainbh layer DefinitionFloat: left;Because float enables the layer to automatically have width and height attributes. (For the time being, this is understandable :)

Finally, define the # footer layer at the bottom. The key to this definition is:Clear: both;This statement cancels the floating inheritance of the # footer layer. Otherwise, you will see # footer closely following # header, instead of under # right.

After the main layer is defined, the layout is OK. Additionally, you can see that I have also defined. Text {margin: 0px; padding: 20px ;}The function of this class is to make the peripheral content have 20 PX blank. Why not define margin or padding directly in # right? Because mozilla and IE have different interpretations of the css box model, defining margin/padding directly will cause layout deformation in mozilla. I generally adopt another internal solution.