This article summarizes the specific use of CSS two-column layout and three-column layout

This article summarizes the specific use of CSS two-column layout and three-column layout

Preface

With the development of big front-end, UI frameworks emerge in endlessly, which makes our front-end development requirements for CSS capabilities less high or less stringent. At least its importance is not as important as JS programming. However, we still need to master the basic CSS. Today we will summarize the methods of CSS layout.

Two column layout

The left column is fixed width, the right column is adaptive

Float + margin layout

HTML code

<body>
  <div id="left">Fixed width of left column</div>
  <div id="right">Right column adaptive</div>
</body>

CSS code:

#left {
  float: left;
  width: 200px;
  height: 400px;
  background-color: lightblue;
}
#right {
  margin-left: 200px; /* greater than or equal to the width of the left column*/
  height: 400px;
  background-color: lightgreen;
}

Float + overflow layout

HTML code

<body>
  <div id="left">Fixed width of left column</div>
  <div id="right">Right column adaptive</div>
</body>

CSS Code

#left {
  float: left;
  width: 200px;
  height: 400px;
  background-color: lightblue;
}
#right {
  overflow: hidden;
  height: 400px;
  background-color: lightgreen;
}

Absolute positioning layout

HTML code:

<body>
  <div id="parent">
    <div id="left">Fixed width of left column</div>
    <div id="right">Right column adaptive</div>
  </div>
</body>

CSS code:

#parent {
  position: relative;
}
#left {
  position: absolute;
  top: 0;
  left: 0;
  width: 200px;
  height: 400px;
  background-color: lightblue;
}
#right {
  position: absolute;
  top: 0;
  left: 200px;
  right: 0;
  height: 400px;
  background-color: lightgreen;
}

Table layout

HTML code:

<body>
  <div id="parent">
    <div id="left">Fixed width of left column</div>
    <div id="right">Right column adaptive</div>
  </div>
</body>

CSS code:

#parent {
  width: 100%;
  height: 400px;
  display: table;
}
#left,
#right {
  display: table-cell;
}
#left {
  width: 200px;
  background-color: lightblue;
}
#right {
  background-color: lightgreen;
}

Flex layout

HTML code:

<body>
  <div id="parent">
    <div id="left">Fixed width of left column</div>
    <div id="right">Right column adaptive</div>
  </div>
</body>

CSS code:

#parent {
  width: 100%;
  height: 400px;
  display: flex;
}
#left {
  width: 200px;
  background-color: lightblue;
}
#right {
  flex: 1;
  background-color: lightgreen;
}

Grid Layout

HTML code:

<body>
  <div id="parent">
    <div id="left">Fixed width of left column</div>
    <div id="right">Right column adaptive</div>
  </div>
</body>

CSS code:

#parent {
  width: 100%;
  height: 400px;
  display: grid;
  grid-template-columns: 200px auto;
}
#left {
  background-color: lightblue;
}
#right {
  background-color: lightgreen;
}

The left column has a variable width, and the right column is adaptive

The left column box width changes as the content increases or decreases, and the right column box adapts

Float + overflow layout

HTML code:

<body>
  <div id="left">Left column variable width</div>
  <div id="right">Right column adaptive</div>
</body>

CSS code:

#left {
  float: left;
  height: 400px;
  background-color: lightblue;
}
#right {
  overflow: hidden;
  height: 400px;
  background-color: lightgreen;
}

Flex layout

HTML code:

<body>
  <div id="parent">
    <div id="left">Left column variable width</div>
    <div id="right">Right column adaptive</div>
  </div>
</body>

CSS code:

#parent {
  display: flex;
  height: 400px;
}
#left {
  background-color: lightblue;
}
#right {
  flex: 1;
  background-color: lightgreen;
}

Grid layout

HTML code:

<body>
  <div id="parent">
    <div id="left">Left column variable width</div>
    <div id="right">Right column adaptive</div>
  </div>
</body>

CSS code:

#parent {
  display: grid;
  grid-template-columns: auto 1fr;
  height: 400px;
}
#left {
  background-color: lightblue;
}
#right {
  background-color: lightgreen;
}

Three column layout

Two columns with fixed width, one column with adaptive width

Float + margin layout

HTML code:

<body>
  <div id="parent">
    <div id="left">Fixed width of left column</div>
    <div id="center">Fixed width of middle column</div>
    <div id="right">Right column adaptive</div>
  </div>
</body>

CSS code:

#parent {
  height: 400px;
}
#left {
  float: left;
  width: 100px;
  height: 400px;
  background-color: lightblue;
}
#center {
  float: left;
  width: 200px;
  height: 400px;
  background-color: lightgrey;
}
#right {
  margin-left: 300px; /* width of left column + width of middle column*/
  height: 400px;
  background-color: lightgreen;
}

Float + overflow layout

HTML code:

<body>
  <div id="parent">
    <div id="left">Fixed width of left column</div>
    <div id="center">Fixed width of middle column</div>
    <div id="right">Right column adaptive</div>
  </div>
</body>

CSS code:

#parent {
  height: 400px;
}
#left {
  float: left;
  width: 100px;
  height: 400px;
  background-color: lightblue;
}
#center {
  float: left;
  width: 200px;
  height: 400px;
  background-color: lightgrey;
}
#right {
  overflow: hidden;
  height: 400px;
  background-color: lightgreen;
}

Table layout

HTML code:

<body>
  <div id="parent">
    <div id="left">Fixed width of left column</div>
    <div id="center">Fixed width of middle column</div>
    <div id="right">Right column adaptive</div>
  </div>
</body>

CSS code:

#parent {
  display: table;
  width: 100%;
  height: 400px;
}
#left {
  display: table-cell;
  width: 100px;
  background-color: lightblue;
}
#center {
  display: table-cell;
  width: 200px;
  background-color: lightgrey;
}
#right {
  display: table-cell;
  background-color: lightgreen;
}

Flex layout

HTML code:

<body>
  <div id="parent">
    <div id="left">Fixed width of left column</div>
    <div id="center">Fixed width of middle column</div>
    <div id="right">Right column adaptive</div>
  </div>
</body>

CSS code:

#parent {
  display: flex;
  width: 100%;
  height: 400px;
}
#left {
  width: 100px;
  background-color: lightblue;
}
#center {
  width: 200px;
  background-color: lightgrey;
}
#right {
  flex: 1;
  background-color: lightgreen;
}

Grid layout

HTML code

<body>
  <div id="parent">
    <div id="left">Fixed width of left column</div>
    <div id="center">Fixed width of middle column</div>
    <div id="right">Right column adaptive</div>
  </div>
</body>

CSS Code

#parent {
  display: grid;
  grid-template-columns: 100px 200px auto;
  width: 100%;
  height: 400px;
}
#left {
  background-color: lightblue;
}
#center {
  background-color: lightgrey;
}
#right {
  background-color: lightgreen;
}

Fixed width on left and right, adaptive in the middle

The purpose of the Holy Grail layout and the Double Wing layout is to load the middle part first, and then start loading the relatively unimportant things in the left and right parts.

Holy Grail Layout

Holy Grail layout: In order to prevent the content in the middle from being blocked, set padding-left and padding-right (values ​​equal to the width of left and right) for the middle div (or the outermost parent div), and use position: relative for the left and right divs and use left and right attributes respectively, so that the left and right column divs will not block the middle div after moving.

HTML code:

<body>
  <div id="parent">
    <div id="center">Middle column</div>
    <div id="left">Left column</div>
    <div id="right">Right column</div>
  </div>
</body>

CSS code:

#parent {
  height: 400px;
  padding: 0 200px;
  overflow: hidden;
}
#left,
#right {
  float: left;
  width: 200px;
  height: 100%;
  position: relative;
  background-color: lightblue;
}
#left {
  margin-left: -100%; /* Move #left up one line*/
  left: -200px;
}
#right {
  right: -200px;
  margin-left: -200px; /* Move #right up one line*/
}
#center {
  float: left;
  width: 100%;
  height: 100%;
  background-color: lightgrey;
}

Double wing layout

Double-wing layout, in order to prevent the content of the middle div from being blocked, create a child div directly inside the middle div to place the content, and use margin-left and margin-right in the child div to reserve space for the left and right column divs.

HTML code:

<body>
  <div id="parent">
    <div id="center">
      <div id="center-inside">Middle column</div>
    </div>
    <div id="left">Left column</div>
    <div id="right">Right column</div>
  </div>
</body>

CSS code:

#left,
#right {
  float: left;
  width: 200px;
  height: 400px;
  background-color: lightblue;
}
#left {
  margin-left: -100%; /* Move #left up one line*/
}
#right {
  margin-left: -200px; /* Move #right up one line*/
}
#center {
  float: left;
  width: 100%;
  height: 400px;
  background-color: lightgrey;
}
#center-inside {
  height: 100%;
  margin: 0 200px;
}

Flex Implementation

HTML code:

<body>
  <div id="parent">
    <div id="center">Middle column</div>
    <div id="left">Left column</div>
    <div id="right">Right column</div>
  </div>
</body>

CSS code:

#parent {
  display: flex;
}
#left,
#right {
  flex: 0 0 200px;
  height: 400px;
  background-color: lightblue;
}
#left {
  order: -1; /* Make #left on the left */
}
#center {
  flex: 1;
  height: 400px;
  background-color: lightgrey;
}

This concludes this article on the specific uses of CSS two-column layout and three-column layout. For more relevant CSS two-column layout and three-column layout content, please search for previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope you will support 123WORDPRESS.COM in the future!

<<:  Img semi-transparent processing Img plus semi-transparent background implementation ideas and code

>>:  Detailed explanation of single-choice and multiple-choice selection in HTML select tag

Recommend

How to uninstall MySQL 8.0 version under Linux

1. Shut down MySQL [root@localhost /]# service my...

CSS scroll bar style modification code

CSS scroll bar style modification code .scroll::-...

Solve the problem of ifconfig being unavailable in docker

Recently, when I was learning docker, I found tha...

Improvements to the web server to improve website performance

<br />In the first section of this series, w...

How to hide the version number and web page cache time in Nginx

Nginx optimization---hiding version number and we...

ElementUI implements cascading selector

This article example shares the specific code of ...

js to implement verification code interference (static)

This article shares the specific code of js to im...

Use native js to simulate the scrolling effect of live bullet screen

Table of contents 1. Basic principles 2. Specific...

Common considerations for building a Hadoop 3.2.0 cluster

One port changes In version 3.2.0, the namenode p...

Detailed explanation of nginx shared memory mechanism

Nginx's shared memory is one of the main reas...

Detailed explanation of MySQL 5.7 MGR single master determination master node method

Our bank's MGR will be launched at the end of...

How to quickly install and deploy MySQL in Windows system (green free installation version)

First, download the green free installation versi...

Talking about ContentType(s) from image/x-png

This also caused the inability to upload png files...

Detailed explanation of samba + OPENldap to build a file sharing server

Here I use samba (file sharing service) v4.9.1 + ...

SQL implementation of LeetCode (178. Score ranking)

[LeetCode] 178.Rank Scores Write a SQL query to r...