First, click here to see the actual operation effect. This page can be centered and highly adaptive in mozilla, opera and IE browsers. Let's analyze the code:
Complete code
<html>
<head>
<style type="text/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;}
</style>
</head>
<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>
</html>
Next define the two middle columns #right and #left. In order to center the two middle columns, we nest a layer #contain outside them and set margin:auto; to contain, so that #right and #left are naturally centered.
Pay attention to the order of definition of the middle two columns. We first define #right and let it float on the rightmost side of the #contain layer through float: right;. Then define #left and let it float to the left of the #right layer through float: left;. This is exactly the opposite of the order in which we defined the table from left to right (Correction: left first then right, or first right then left, you can design it according to your own needs).
We see that there is a layer #mainbg nested between #contain and the two columns in the code. What is this layer used for? This layer is used to define the background of #contain. You will definitely ask, why not define the background directly in #contain, but add another layer? That's because the background defined directly in #contain will not be displayed in mozilla, and the height value must be defined. If a height value is defined, the #right layer cannot automatically scale according to the content. In order to solve the background and height problems, it is necessary to add such a #mainbg layer. The trick is to define float: left; for the #mainbh layer, because float automatically gives the layer width and height attributes. (Let’s understand it this way for the time being:)
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 displayed next to #header instead of under #right.
Once the main layers are defined, the layout is ready. One additional point: You saw that I also defined a .text{margin:0px;padding:20px;}. The function of this class is to create a 20px margin around the content. Why not define margin or padding directly in #right? Because Mozilla and IE have inconsistent interpretations of the CSS box model, directly defining margin/padding will cause layout deformation in Mozilla. I usually solve the problem by putting another layer inside.