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

Is it easy to encapsulate a pop-up component using Vue3?

Table of contents Summary put first: 🌲🌲 Preface: ...

JavaScript canvas implements graphics and text with shadows

Use canvas to create graphics and text with shado...

Solve the problem that the IP address obtained using nginx is 127.0.0.1

Get ip tool import lombok.extern.slf4j.Slf4j; imp...

Solve the problem that the CentOS7 virtual machine cannot access the Internet and set up the CentOS7 virtual machine to use a static IP to access the Internet

I was playing with CentOS in a VMware virtual mac...

CentOS 7 installation and configuration method graphic tutorial

This article records the detailed installation tu...

How to use axios to make network requests in React Native

In front-end development, there are many ways to ...

Nginx proxy forwarding implementation code uploaded by Alibaba Cloud OSS

Preface Because the mini program upload requires ...

Practice of Vue global custom instruction Modal drag

Table of contents background Implementation ideas...

Detailed explanation of Vue save automatic formatting line break

I searched for many ways to change it online but ...

Use of LRU algorithm in Vue built-in component keep-alive

Table of contents The use of Vue's keep-alive...

JavaScript navigator.userAgent obtains browser information case explanation

The browser is probably the most familiar tool fo...

Examples of vertical grid and progressive line spacing

New Questions Come and go in a hurry. It has been...

Key knowledge summary of Vue development guide

Table of contents Overview 0. JavaScript and Web ...

How to manage cached pages in Vue

Table of contents Problem 1: Destruction 1. How t...

Detailed explanation of Vue lazyload picture lazy loading example

Documentation: https://github.com/hilongjw/vue-la...