Typical three rows and two columns centered height adaptive layout

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

WBOY

Release： 2016-05-16 12:12:12

Original

1587 people have browsed it

How to center the entire page content and how to automatically scale the height to adapt to the content. This is the most common problem when learning CSS layout. A practical example is given below and explained in detail. (The experience and experience in this article are the result of discussions between xpoint and guoshuang on the Blue Ideal Forum.)

First of allClick here to see the actual running effect. This page can be centered and highly adaptive in mozilla, opera and IE browsers. Let’s analyze the code:

Full code

header< /div>

class="text">right

1< /p>

left

Code Analysis

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

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.