Detailed explanation of CSS multiple three-column adaptive layout implementation

Preface

In order to follow the conventional WEB layout, all of them are written in left-center-right layout with header and footer mode.

The first one: based on float implementation

Implementation ideas

Conventional thinking is to make the left and right Aside float to the left and right sides respectively.

Code Implementation

<!-- HTML section -->
<div class="container">
  <!-- Top Header -->
  <header>Here is the header</header>
  <!-- Aside and content in the middle -->
  <div class="middle clearfix">
    <aside class="left"></aside>
    <aside class="right"></aside>
    <!-- The middle content is placed below the right column to prevent the right side from being squeezed down. -->
    <div class="content">Here is the content</div>
  </div>
  <!-- Footer -->
  <footer></footer>
</div>
<!-- CSS section -->
<style lang="scss">
  * {
    margin: 0;
    padding: 0;
  }
  
  .clearfix {
    zoom: 1;
    &::after {
      display: block;
      content: ' ';
      clear:both
    }
  }
  
  html, body {
    width: 100%;
    height: 100%
    }
    .container {
      width: 100%
      height: 100%
      header {
        height: 80px;
        background: rgba(0, 0, 0, 0.5)
      }
      footer {
        height: 80px;
        background: rgba(0, 0, 0, 0.5)
      }
      .middle {
        height: calc(100% - 80px - 80px)
        aside
          height: 100%;
          width: 300px;
          background: rgba(156, 154, 249, 1)
        }
        .left {
          float: left
        }
        .right: {
          float: right
        }
      }
    }
  }
</style>

Achieve results

The second method: based on position: absolute implementation

Implementation ideas

Assign position: relative to the parent of the three middle columns, and assign position: absolute to the left and right Aside columns, and assign left: 0 and right: 0 width: custom values respectively. Assign the middle content left and right to the same width as the left and right widths respectively.

Code Implementation

<!-- HTML related code-->
<div class="container">
  <!-- Top Header -->
  <header></header>
  <div class="middle">
    <!-- Left Aside -->
    <aside class="left"></aside>
    <!-- Middle content -->
    <div class="content">Here is the content</div>
    <!-- Right Aside -->
    <aside class="right"></aside>
  </div>
  <!-- Footer -->
  <footer></footer>
</div>
<!-- CSS related code-->
<style lang="scss">
  * {
    margin: 0;
    padding: 0
  }
  
  html, body {
    width: 100%;
    height: 100%
  }
  
  .container {
    width: 100%;
    height: 100%;
    header {
      height: 80px;
      background: rgba(0, 0, 0, 0.5);
    }
    footer {
      height: 80px;
      background: rgba(0, 0, 0, 0.5);
    }
    .middle {
      height: calc(100% - 80px - 80px);
      position: relative;
      aside,
      .content {
        position: absolute;
      }
      .left {
        width: 300px;
        background: rgba(156, 154, 249, 1);
        left: 0;
        height: 100%;
      }
      .right {
        width: 300px;
        background: rgba(156, 154, 249, 1);
        right: 0;
        height: 100%;
      }
      .content {
        left: 300px;
        right: 300px;
      }
    }
  }
</style>

Achieve results

The third method: based on display: flex

Implementation ideas

Give the left, middle and right columns parent display: flex, give the left and right Aside widths custom values, and give the middle content flex:1

Code Implementation

<!-- HTML related code-->
<div class="container">
  <!-- Top Header -->
  <header></header>
  <div class="middle">
    <!-- Left Aside -->
    <aside class="left"></aside>
    <!-- Middle content -->
    <div class="content">Here is the content</div>
    <!-- Right Aside -->
    <aside class="right"></aside>
  </div>
  <!-- Footer -->
  <footer></footer>
</div>
<!-- CSS section -->
<style lang="scss">
  * {
    margin: 0;
    padding: 0;
  }
  
  html, body {
    width: 100%;
    height: 100%;
  }
  
  .container {
    header {
      height: 80px;
      background: rgba(0, 0, 0, 0.5);
    }
    footer {
      height: 80px;
      background: rgba(0, 0, 0, 0.5);
    }
    .middle {
      display: flex;
      height: calc(100% - 80px - 80px);
      aside
        width: 300px;
        background: rgba(156, 154, 249, 1);
      }
      .content: {
        flex: 1;
      }
    }
  }
</style>

Achieve results

The fourth method: based on display: table implementation

Implementation ideas

Give the parent of the left, middle and right columns display: table, width: 100%, give the left, middle and right columns display: table-cell respectively, and give the left and right Aside width respectively.

Code Implementation

<!-- HTML related code-->
<div class="container">
  <!-- Top Header -->
  <header></header>
  <div class="middle">
    <!-- Left Aside -->
    <aside class="left"></aside>
    <!-- Middle content -->
    <div class="content">Here is the content</div>
    <!-- Right Aside -->
    <aside class="right"></aside>
  </div>
  <!-- Footer -->
  <footer></footer>
</div>
<!-- CSS section -->
<style lang="scss">
  * {
    margin: 0;
    padding: 0;
  }
  
  html, body {
    width: 100%;
    height: 100%;
  }
  
  .container {
    header {
      height: 80px;
      background: rgba(0, 0, 0, 0.5);
    }
    footer {
      height: 80px;
      background: rgba(0, 0, 0, 0.5);
    }
    .middle {
      display: table;
      width: 100%
      height: calc(100% - 80px - 80px);
      aside
        width: 300px;
        display: table-cell;
        background: rgba(156, 154, 249, 1);
      }
      .content: {
        display: table-cell;
      }
    }
  }
</style>

Achieve results

Fifth: based on display: grid implementation

Implementation ideas

Give the left, middle and right columns parent display: grid, and use grid-template-columns: 300px auto 300px to divide them into three columns with widths of 300px, auto, and 300px.

Code Implementation

<!-- HTML related code-->
<div class="container">
  <!-- Top Header -->
  <header></header>
  <div class="middle">
    <!-- Left Aside -->
    <aside class="left"></aside>
    <!-- Middle content -->
    <div class="content">Here is the content</div>
    <!-- Right Aside -->
    <aside class="right"></aside>
  </div>
  <!-- Footer -->
  <footer></footer>
</div>
<!-- CSS section -->
<style lang="scss">
  * {
    margin: 0;
    padding: 0;
  }
  
  html, body {
    width: 100%;
    height: 100%;
  }
  
  .container {
    header {
      height: 80px;
      background: rgba(0, 0, 0, 0.5);
    }
    footer {
      height: 80px;
      background: rgba(0, 0, 0, 0.5);
    }
    .middle {
      display: grid;
      grid-template-columns: 300px auto 300px;
      height: calc(100% - 80px - 80px);
      aside
        background: rgba(156, 154, 249, 1);
      }
    }
  }
</style>

Achieve results

This concludes this article on the detailed explanation of the implementation of various three-column adaptive layouts in CSS. For more relevant CSS three-column adaptive layout content, please search for previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope that everyone will support 123WORDPRESS.COM in the future!

<<: Use of select, distinct, and limit in MySQL

>>: Explore the characteristics and expressions of different spaces in HTML (recommended)