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

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

15 Best Practices for HTML Beginners

CSS3 transition to achieve underline example code

Detailed introduction to linux host name configuration

The most convenient way to build a Zookeeper server in history (recommended)

Tomcat source code analysis of Web requests and processing

How to build mysql master-slave server on centos7 (graphic tutorial)

JavaScript to achieve slow motion animation effect

Configure nginx to redirect to the system maintenance page

How to use the vue timeline component

Detailed installation steps for MySQL 8.0.11

Recommend

How to adjust the log level of nginx in Docker

How to assign default values to fields when querying MySQL

How to install Postgres 12 + pgadmin in local Docker (support Apple M1)

Detailed explanation of common methods of JavaScript arrays

Mysql WorkBench installation and configuration graphic tutorial

MySQL cursor detailed introduction

Detailed explanation on how to get the IP address of a docker container

CSS list sliding to prevent being covered by the bottom and adapt to the longer screen model processing

Implement a simple search engine based on MySQL

How to deploy your first application with Docker

Examples of common operations on MySQL foreign key constraints [view, add, modify, delete]

mysql IS NULL using index case explanation

PHP scheduled backup MySQL and mysqldump syntax parameters detailed

How to Understand and Identify File Types in Linux

jQuery+swiper component realizes the timeline sliding year tab switching effect