How to center the entire page content so that the height can adapt to the content and automatically expand

How to center the entire page content and how to make the height automatically expand and contract to adapt to the content. This is the most common problem when learning CSS layout. A practical example is given below, followed by a detailed explanation.

First, click 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:

Copy code

The code is as follows:

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

Code Analysis:
First, we define the body and the first line #header at the top. The key here is text-align:center; in the body and margin-right: auto;margin-left: auto; in the header. These two sentences make the header centered. Note: In fact, defining text-align:center; has already achieved 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; for contain, so that #right and #left are naturally centered.
Note the order in which the two middle columns are defined. We first define #right and use float: right; to make it float to the rightmost side of the #contain layer. Then define #left and use float: left; to make it float to the left of the #right layer. This is exactly the opposite of the order we defined the table from left to right before (correction: it can be implemented either left first then right, or right first then left, design according to your needs).

We can 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 may ask, why not define the background directly in #contain instead of adding an extra layer? That's because the background defined directly in #contain will not be displayed in Mozilla, so the height value must be defined. If a height value is defined, the #right layer cannot automatically scale based on 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; in the #mainbh layer, because float automatically gives the layer width and height attributes. (For the time being, let’s understand it this way:)

Finally, the #footer layer defines the bottom. The key to this definition is: clear:both;, which cancels the floating inheritance of the #footer layer. Otherwise, you'll see #footer displayed right next to #header instead of underneath #right.
Now that the main layers are defined, the layout is ready. One more thing to add: You can see that I also defined a .text{margin:0px;padding:20px;}. The purpose of this class is to create a 20px blank space around the content. Why not define margin or padding directly in #right? Because Mozilla and IE have different interpretations of the CSS box model, directly defining margin/padding will cause layout deformation in Mozilla. I usually solve this problem by adding another layer inside.

<<: Explanation and example usage of 4 custom instructions in Vue

>>: Docker installs mysql and solves the Chinese garbled problem

MySQL 8.0.14 installation and configuration method graphic tutorial

How to center the entire page content so that the height can adapt to the content and automatically expand

MySQL 8.0.14 installation and configuration method graphic tutorial

Vue implements the product tab of the product details page function

Detailed instructions for installing Jenkins on Ubuntu 16.04

Instructions for using the database connection pool Druid

Detailed explanation of JS homology strategy and CSRF

Example code for setting hot links and coordinate values for web images

Discussion on image path issues in css (same package/different package)

MySQL infrastructure tutorial: detailed explanation of the query statement execution process

Implementation of react loop data (list)

MySQL 8.0 New Features - Introduction to Check Constraints

Recommend

HTML table markup tutorial (9): cell spacing attribute CELLSPACING

Detailed installation history of Ubuntu 20.04 LTS

Tutorial on how to connect and use MySQL 8.0 in IDEA's Maven project

jQuery implements all selection and reverse selection operation case

Solution to ERROR 1054 (42S22) when changing password in MySQL 5.7

8 JS reduce usage examples and reduce operation methods

A complete example of Vue's multi-level jump (page drill-down) function for related pages

How to deploy and start redis in docker

A brief introduction to web2.0 products and functions

How to realize vertical arrangement of text using CSS3

How to use JavaScript to determine several common browsers through userAgent

VUE implements a Flappy Bird game sample code

Solution to Nginx session loss problem

Install two MySQL5.6.35 databases under win10

The difference between mysql outer join and inner join query