Typical three row, two column center height adaptive layout _css/html

How to center the entire content of the page, how to adapt the content automatically scaling. This is the most common problem in learning CSS layouts. A practical example is given below and explained in detail. (This article's experience and is the Blue Ideal forum Xpoint, the Guoshuang joint discussion obtains. ）

First click here to see the actual performance, this page in Mozilla, opera and IE browser can be achieved in the center and highly adaptive. Let's analyze the code:

Full code

Header



class= "Text" >right

1

1

1

1

1

Left



Footer

Code Analysis

First we define the body and the top of the first line #header, which is the key is the body of the text-align:center; And the Margin-right:auto;margin-left:autoin the header, which makes the header centered by the two sentences. Note: In fact, the definition of Text-align:center, is already in the center of IE, but in Mozilla invalid, need to set up Margin:auto, can realize the center in Mozilla.

Next, define two columns of #right and #left in the middle. To make the middle two columns also centered, we nest a layer #contain outside of them and set the Margin:auto on the contain, so that #right and #left are naturally centered.

Note the order in which the middle two columns are defined, we first define #right, through float:right; Let it float on the far right of the #contain layer. And then define #left, through float:left; Let it float on the left side of the #right layer. This is the opposite of the order in which our previous tables are defined from left to right (correct: first left and right, or first right and left, can be implemented according to your needs).

We see that there is a layer #mainbg between the #contain and the two columns in the code, what does this layer do? This layer is used to define the background of the #contain. You're sure to ask, why not define the background directly in the #contain, but one more layer? That is because the background that is directly defined in the #contain will not appear in Mozilla and must be defined with a height value. If the height value is defined, #right层就无法实现根据内容的自动伸缩. In order to solve the background and height problem, we must add such a #mainbg layer. The trick is to #mainbh this layer to define float:left, because float makes the layer automatically have a width and height property. (For the moment, understand:)

Finally, define the #footer layer at the bottom. The key to this definition is:clear:both;The function of this sentence is to cancel the floating inheritance of the #footer layer. Otherwise, you will see #footer close to the #header display, not under #right.

The main layer definition is complete and the layout is OK. To add: You see I also define a . text{margin:0px;padding:20px;}, the function of this class is to make the outside of the content 20px blank. Why not directly in the #right definition margin or padding, because Mozilla and IE to the CSS box model interpretation inconsistent, the direct definition of margin/padding will cause the layout of the Mozilla deformation. I generally use the internal re-layer approach to solve.

