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 analyzeCode:
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:
<Body>
<Div id = "Header"> header </div>
<Div id = "contain">
<Div id = "mainbg">
<Div id = "right">
<Div
Class = "text"> right <p> 1 </P> <p> 1 </P> <p> 1 </P> <p> 1 </P> <p> 1 </P> </div>
</Div>
<Div id = "Left">
<Div class = "text"> left </div>
</Div>
</Div>
</Div>
<Div id = "footer"> footer </div>
</Body>
Running effect:
First, we define the body and the first line at the top # header. The key here is text-align: center in the body; and margin-Right: Auto in the header; margin-left: auto ;, use these two statements 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. First, we define # Right through float: Right; so that it floats to the rightmost of the # contain layer. Then define # Left, float: Left; And let it float on 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. The trick is that the # mainbh layer defines float: 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 is used to cancel 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. One more point: You can see that I have also defined a. Text {margin: 0px; padding: 20px;}. The role of this class is to make the content of the peripheral blank 20px. 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.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
