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

Detailed explanation of value transfer between parent and child components in Vue3

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

Detailed explanation of value transfer between parent and child components in Vue3

Learn MySQL database in one hour (Zhang Guo)

Steps to run ASP.NET Core in Docker container

Detailed explanation of how to customize the style of CSS scroll bars

22 Vue optimization tips (project practical)

Complete steps to install FFmpeg in CentOS server

Create a virtual machine and install the Redhat Linux operating system on VMware (graphic tutorial)

MySQL Binlog Data Recovery: Detailed Explanation of Accidentally Deleting a Database

CSS animation combined with SVG to create energy flow effect

Detailed tutorial on building a local idea activation server

Recommend

Complete Tutorial on Deploying Java Web Project on Linux Server

How to use js to communicate between two html windows

Detailed explanation of MySQL/Java server support for emoji and problem solving

How to use CSS pseudo-elements to control the style of several consecutive elements

Demonstration of building ElasticSearch middleware and common interfaces under centos7 in Linux system

How to prevent iframe from jumping to the page in HTML and use iframe to embed WeChat web version in the page

Two ways to achieve horizontal arrangement of ul and li using CSS

MySQL 8.0.11 MacOS 10.13 installation and configuration method graphic tutorial

Detailed explanation of the decimal padding problem of decimal data type in MySQL

Docker container deployment attempt - multi-container communication (node+mongoDB+nginx)

Nginx load balancing configuration, automatic switching mode when downtime occurs

React Native scaffolding basic usage detailed explanation

Understanding render in Vue scaffolding

How to implement concurrency control in JavaScript

How to change fixed positioning of child elements to absolute positioning by CSS3 transform