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