How to use CSS to achieve two columns fixed in the middle and adaptive

1. Use absolute positioning and margin

The principle of this method is to position the left and right sides so that they are out of the document flow. The center area flows naturally below them, and then sets the margin value for them

In this method, the order of the page element structure can be changed at will. Note that the top value needs to be processed, otherwise there may be misalignment.

HTML

<div id='container'>
    <div class='left'>Left side</div>
    <div class='center'>Middle</div>
    <div class='right'>right side</div>
</div>

CSS

#container {
    position: relative;
}
.left, .right{
    position: absolute;
    top: 0;
    width: 200px;
    min-height: 500px;
    background-color: red;
}
.left {
    left: 0;
}
.right {
    right: 0;
}
.center {
    margin: 0px 210px;
    min-height: 500px;
    background-color: yellow;
}

2. Use floats and margins

The principle of this method is to float the left and right sides to make them out of the document flow, and the center part is in the normal document flow, and then set the margin value for it

This method requires that the center part be placed last. When the window is particularly small, the right side will be squeezed down.

HTML

<div id='container'>
    <div class='left'>Left side</div>
    <div class='right'>right side</div>
    <div class='center'>Middle</div>
</div>

CSS

#container {
    position: relative;
}
.left, .right {
    width: 200px;
    min-height: 500px;
    background-color: red;
}
.left {
    float: left;
}
.right {
    float: right;
}
.center {
    min-height: 500px;
    margin: 0px 210px;
    background-color: yellow;
}

3. Holy Grail Layout

This method is the most common, the three are interrelated, and the most robust.

First, you need to put the middle part in the front and wrap it with a layer of container. The outer container makes it take up 100% of the entire screen, and the left, center and right sides are all float: left. Set the center left and right margins to the width of the containers on both sides plus the margins, set the left margin-left to -100% to make it appear on the far left, and set the right margin-right to -200px to make it appear on the far right.

HTML

<div id='container'>
    <div class='center_wrap'>
        <div class='center'>Middle</div>
    </div>
    <div class='left'>Left side</div>
    <div class='right'>right side</div>
</div>

CSS

#container {
    position: relative;
}
.center_wrap, .left, .right{
    float: left;
    min-height: 500px;
}
.center_wrap {
    width: 100%;
}
.center_wrap .center{
    min-height: 500px;
    margin: 0px 210px;
    background-color: yellow;
}
.left, .right {
    width: 200px;
    background-color: red;
}
.left {
    margin-left: -100%;
}
.right {
    margin-left: -200px;
}

4. CSS3 flex

HTML

<div id='container'>
    <div class='left'>Left side</div>
    <div class='center'>Middle</div>
    <div class='right'>right side</div>
</div>

CSS

#container {
    width: 100%;
    display: flex;
}
.left, .right {
    width: 200px;
    background-color: red;
    min-height: 500px;
}
.center {
    flex: 1;
    min-height: 500px;
    margin: 0 10px;
    background-color: yellow;
}

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

<<: Some tips on deep optimization to improve website access speed

>>: JavaScript imitates Taobao magnifying glass effect

js realizes the magnifying glass effect of shopping website products

How to use CSS to achieve two columns fixed in the middle and adaptive

js realizes the magnifying glass effect of shopping website products

What are HTML inline elements and block-level elements and their differences

Pure CSS to achieve horizontal line animation under the element (background-image)

Detailed explanation of inline elements and block-level elements in commonly used HTML tags

How to manually install MySQL 5.7 on CentOS 7.4

Will the most successful companies in the future be technology companies or design companies?

Detailed explanation of MySQL foreign key constraints

Centos7 startup process and Nginx startup configuration in Systemd

Ubuntu 18.0.4 installs mysql and solves ERROR 1698 (28000): Access denied for user ''root''@''localhost''

Understanding and using callback functions in JavaScript

Recommend

CentOS 7 installation and configuration tutorial under VMware10

Sample code for implementing markdown automatic numbering with pure CSS

How to query the latest transaction ID in MySQL

Detailed explanation of js event delegation

React new version life cycle hook function and usage detailed explanation

Forever+nginx deployment method example of Node site

Implementation of docker-compose deployment project based on MySQL8

How to install the graphical interface in Linux

Specific use of useRef in React

MySQL uses UNIQUE to implement non-duplicate data insertion

Detailed explanation of the use of Vue's new built-in components

Error mysql Table 'performance_schema...Solution

Vue implements drag progress bar

How to make React components full screen

Table of CSS Bugs Caused by hasLayout