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