Typical three rows and two columns centered height adaptive layout_CSS/HTML

Code Analysis

First we define the body and the first line at the top #header. The key here is the text-align:center; in the body and the margin-right: auto;margin- left: auto;, these two sentences make the header centered. Note: In fact, defining text-align:center; already achieves centering in IE, but it is invalid in mozilla. You need to set margin:auto; to achieve centering in mozilla.

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 the #mainbh layer float: left;, 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.

After 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.