Typical div+css three row two column center height adaptive layout

css| Self Adaptation

How to center the entire content of the page, and how to fit the content automatically to scale. 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, Guoshuang the discussion to come together. ）

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

Css:

body{
Background: #999;
Text-align:center;
Color: #333;
Font-family:arial,verdana,sans-serif;
}
#header {
width:776px;
Margin-right:auto;
Margin-left:auto;
padding:0px;
Background: #EEE;
height:60px;
Text-align:left;
} #contain {
Margin-right:auto;
Margin-left:auto;
width:776px;
} #mainbg {
width:776px;
padding:0px;
Background: #60A179;
Float:left;
}
#right {
Float:right;
margin:2px 0px 2px 0px;
padding:0px;
width:574px;
Background: #ccd2de;
Text-align:left;
}
#left {
Float:left;
margin:2px 2px 0px 0px;
padding:0px;
Background: #F2F3F7;
width:200px;
Text-align:left;
}
#footer {
Clear:both;
width:776px;
Margin-right:auto;
Margin-left:auto;
padding:0px;
Background: #EEE;
height:60px;}
. text{margin:0px;padding:20px;}

Html:

header

class= "Text" >right

1

1

1

1

1

left

footer

　　Operation Effect:

First we define the body and the top of the first line of #header, which is the key inside the body of the Text-align:center and the header in the Margin-right:auto;margin-left:auto; Use these two sentences to center the header. Note: In fact, the definition of Text-align:center has been implemented in IE center, but in Mozilla is not valid, you need to set Margin:auto, you can achieve the center of Mozilla.

Next, define the two columns #right and #left in the middle. In order for the middle two columns to also be centered, we nested a layer #contain outside them and set the Margin:auto for the contain, so that #right and #left are centered naturally.

Notice the sequence defined in the middle two column, we first define the #right through the float:right; let it float on the far right of the #contain layer. Then define the #left, pass the float:left, and let it float on the left side of the #right layer. This is the opposite of the order we defined in the previous table from left to right (correction: first left and right, or right after the left can be achieved, according to their own needs to design).

We see a layer #mainbg between #contain and two columns in the code, what does this layer do? This layer is used to define the background of the #contain. You are sure to ask, why not define the background directly in the #contain, but to set a more layer? That's because the background defined directly in #contain is not shown in Mozilla, and you must define a height value. #right层就无法实现根据内容的自动伸缩 If the height value is defined. In order to solve the problem of background and height, it is necessary to increase such a #mainbg layer. The trick is to #mainbh this layer to define float:left, because float makes the layer automatically have wide and high properties. (For the moment to understand this:)

Finally, define the #footer layer at the bottom. The key to this definition is: Clear:both, the role of this sentence is to cancel the #footer layer of floating inheritance. Otherwise, you will see the #footer cling to the #header display, not underneath the #right.

The main layer is defined and the layout is OK. Add a point: You see I also define a. text{margin:0px;padding:20px, which is the function of this class is to make the content of the periphery of 20px blank. Why not directly in the #right definition of margin or padding, because Mozilla and IE to the CSS box model of the interpretation of the inconsistent, direct definition of margin/padding will cause the layout of Mozilla variant. I generally use the internal and another layer of practice to solve.