Several common CSS layouts (summary)

Summary

This article will introduce the following common layouts:

There are many ways to implement a three-column layout. This article focuses on the Holy Grail layout and the Double Wings layout. Several other ways to achieve a three-column layout

1. Single column layout

There are two common single-column layouts:

• Single column layout with equal widths for header, content and footer
• A single-column layout with equal widths for header and footer and slightly narrower content

1. How to implement

For the first method, first set the width of header, content, and footer to 1000px; or max-width: 1000px (the difference between the two is that when the screen is smaller than 1000px, the former will have a scroll bar, while the latter will not, and the actual width will be displayed); then set margin: auto to achieve centering.

<div class="header"></div>
<div class="content"></div>
<div class="footer"></div>

For the second type, the content width of header and footer is not set, and the block-level elements fill the entire screen. However, the content areas of header, content, and footer are set to the same width and centered through margin:auto.

.header{
    margin:0 auto; 
    max-width: 960px;
    height:100px;
    background-color: blue;
}
.content{
    margin: 0 auto;
    max-width: 960px;
    height: 400px;
    background-color: aquamarine;
}
.footer{
    margin: 0 auto;
    max-width: 960px;
    height: 100px;
    background-color: aqua;
}

2. Two-column adaptive layout

A two-column adaptive layout is one column that is stretched by content, and the other column fills the remaining width.

1.float+overflow:hidden

If it is a normal two-column layout, the margin of float + normal elements can be used to achieve it, but if it is an adaptive two-column layout, it can be achieved by using float + overflow: hidden. This method mainly triggers BFC through overflow, and BFC will not overlap floating elements. Since setting overflow:hidden does not trigger the haslayout property of IE6-browser, you need to set zoom:1 to be compatible with IE6-browser. The specific code is as follows:

<div class="parent" style="background-color: lightgrey;">
    <div class="left" style="background-color: lightblue;">
        <p>left</p>
    </div>
    <div class="right" style="background-color: lightgreen;">
        <p>right</p>
        <p>right</p>
    </div>        
</div>

.parent {
  overflow: hidden;
  zoom: 1;
}
.left {
  float: left;
  margin-right: 20px;
}
.right {
  overflow: hidden;
  zoom: 1;
}

Note: If the sidebar is on the right, pay attention to the rendering order. That is, in HTML, write the sidebar first and then the main content.

2.Flex Layout

Flex layout, also called elastic box layout, can realize the layout of various pages with just a few simple lines of code.

//The html part is the same as above.parent {
  display:flex;
}  
.right {
  margin-left:20px; 
  flex:1;
}

3. Grid layout

Grid layout is a two-dimensional grid-based layout system designed to optimize user interface design.

//The html part is the same as above.parent {
  display:grid;
  grid-template-columns:auto 1fr;
  grid-gap:20px
}

3. Three-column layout

Features: The middle column has an adaptive width, and the two sides have a fixed width

1. Holy Grail Layout

① Features

A more special three-column layout also has fixed widths on both sides and adaptive width in the middle. The only difference is that the DOM structure must write the middle column first, so that the middle column can be loaded first.

.container {
    padding-left: 220px; // Make room for the left and right columns padding-right: 220px;
  }
  .left {
    float: left;
    width: 200px;
    height: 400px;
    background: red;
    margin-left: -100%;
    position: relative;
    left: -220px;
  }
  .center {
    float: left;
    width: 100%;
    height: 500px;
    background: yellow;
  }
  .right {
    float: left;
    width: 200px;
    height: 400px;
    background: blue;
    margin-left: -200px;
    position: relative;
    right: -220px;
  }

 <article class="container">
    <div class="center">
      <h2>Holy Grail Layout</h2>
    </div>
    <div class="left"></div>
    <div class="right"></div>
  </article>

② Implementation steps

All three parts are set to float left, otherwise the content on the left and right sides will not be able to move up and will not be able to be in the same row as the middle column. Then set the width of center to 100% (to achieve adaptive content in the middle column). At this time, the left and right parts will jump to the next line.

By setting margin-left to a negative value, the left and right parts return to the same line as the center part.

By setting the padding-left and padding-right of the parent container, leave gaps on the left and right sides.

By setting relative positioning, the left and right parts are moved to both sides.

③ Disadvantages

The minimum width of the center part cannot be less than the width of the left part, otherwise the left part will fall to the next line

If the height of one column is extended (as shown below), the backgrounds of the other two columns will not be automatically filled. (This can be solved with equal height layout positive padding + negative margin, which will be introduced below)

2. Double-wing layout

① Features

It also has a three-column layout, which is further optimized based on the Holy Grail layout, solving the problem of the Holy Grail layout disorder and achieving the separation of content and layout. And any column can be the highest column without any problem.

 .container {
        min-width: 600px; // Ensure that the content in the middle can be displayed, twice the left width + right width}
    .left {
        float: left;
        width: 200px;
        height: 400px;
        background: red;
        margin-left: -100%;
    }
    .center {
        float: left;
        width: 100%;
        height: 500px;
        background: yellow;
    }
    .center .inner {
        margin: 0 200px; //Newly added part}
    .right {
        float: left;
        width: 200px;
        height: 400px;
        background: blue;
        margin-left: -200px;
    }

   <article class="container">
        <div class="center">
            <div class="inner">Double wing layout</div>
        </div>
        <div class="left"></div>
        <div class="right"></div>
    </article>

② Implementation steps (the first two steps are the same as the Holy Grail layout)

• All three parts are set to float left, and then the width of the center is set to 100%. At this time, the left and right parts will jump to the next line;
• By setting margin-left to a negative value, the left and right parts return to the same line as the center part;
• Add an inner div to the center part and set margin: 0 200px;

③ Disadvantages

Adding one more layer of DOM tree nodes increases the amount of computation required to generate the rendering tree.

3. Comparison of two layout implementation methods:

• Both layout methods put the main column at the front of the document flow so that the main column is loaded first.
• The two layout methods are also similar in implementation, both of which allow three columns to float and then form a three-column layout through negative margins.
• The difference between the two layout methods lies in how to handle the position of the middle main column: the Holy Grail layout uses the left and right padding of the parent container + the relative positioning of two subordinate columns;
  

The double-wing layout is to nest the main column in a new parent block and use the left and right margins of the main column to adjust the layout

4. Equal height layout

Equal height layout refers to the layout method in which child elements have equal heights in the parent element. Next we introduce several common implementation methods:

1. Use positive padding + negative margin

We can solve the second shortcoming of the Holy Grail layout by using equal layout, because the background is displayed in the padding area. Set a large padding-bottom, set a negative margin-bottom of the same value, add a container outside all columns, and set overflow:hidden to cut off the overflowing background. This method can achieve a multi-column equal-height layout and also achieve the effect of separators between columns. It has a simple structure and is compatible with all browsers. The new code is as follows:

   .center,
      .left,
      .right {
        padding-bottom: 10000px;
        margin-bottom: -10000px;
      }
      .container {
        padding-left: 220px;
        padding-right: 220px;
        overflow: hidden; //Cut off the overflow background} 

2. Use background images

This method is the earliest method we used to achieve equal-height columns. It is to use a background image and use this background image on the parent element of the column to lay out the Y axis, thereby creating the illusion of equal-height columns. The implementation method is simple and has strong compatibility. It can be easily implemented without too many CSS styles, but this method is not suitable for high-column layouts such as fluid layouts.

Before making a style, you need a background image similar to the following:

<div class="container clearfix">
    <div class="left"></div>
    <div class="content"></div>
    <div class="right"></div>
</div>

.container {
  background: url("column.png") repeat-y;
  width: 960px;
  margin: 0 auto;
}
.left {
  float: left;
  width: 220px;
}
.content {
  float: left;
  width: 480px;
}
.right {
  float: left;
  width: 220px;
}

3. Mimic table layout

This is a very simple, easy to implement method. However, the compatibility is poor and it cannot run normally in IE6-7.

 <div class="container table">
      <div class="containerInner tableRow">
        <div class="column tableCell cell1">
          <div class="left aside">
            ....
          </div>
        </div>
        <div class="column tableCell cell2">
          <div class="content section">
            ...
          </div>
        </div>
        <div class="column tableCell cell3">
          <div class="right aside">
            ...
          </div>
        </div>
      </div>
    </div>

.table {
  width: auto;
  min-width: 1000px;
  margin: 0 auto;
  padding: 0;
  display: table;
}
.tableRow {
  display: table-row;
}
.tableCell {
  display: table-cell;
  width: 33%;
}
.cell1 {
  background: #f00;
  height: 800px;
}
.cell2 {
  background: #0f0;
}
.cell3 {
  background: #00f;
}

4. Use borders and positioning

This approach uses borders and absolute positioning to achieve a fake effect of equal-height columns. It has a simple structure, is compatible with all browsers, and is easy to master. Suppose you need to implement a two-column equal-height layout, where the sidebar height is equal to the main content height.

#wrapper {
  width: 960px;
  margin: 0 auto;
}
#mainContent {
  border-right: 220px solid #dfdfdf;
  position: absolute;
  width: 740px;
  height: 800px;  
  background: green;
}
#sidebar {
  background: #dfdfdf;
  margin-left: 740px;
  position: absolute;
  height: 800px;
  width: 220px;
}

5. Sticky layout

1. Features

• There is a block of content <main> . When the height of <main> is long enough, the element <footer> that follows <main> will follow the <main> element.
• When the <main> element is short (for example, smaller than the screen height), we expect the <footer> element to "stick" to the bottom of the screen.

The specific code is as follows:

 <div id="wrap">
      <div class="main">
        main <br />
        main <br />
        main <br />
      </div>
    </div>
    <div id="footer">footer</div>

  * {
        margin: 0;
        padding: 0;
      }
      html,
      body {
        height: 100%; //The height is inherited layer by layer}
      #wrap {
        min-height: 100%;
        background: pink;
        text-align: center;
        overflow: hidden;
      }
      #wrap .main {
        padding-bottom: 50px;
      }
      #footer {
        height: 50px;
        line-height: 50px;
        background: deeppink;
        text-align: center;
        margin-top: -50px;
      }

2. Implementation steps

(1) footer must be an independent structure and has no nesting relationship with wrap

(2) The height of the wrap area is changed to the viewport height by setting min-height

(3) The footer should use a negative margin to determine its position

(4) Padding-bottom needs to be set in the main area. This is also to prevent negative margins from causing the footer to cover any actual content.

Revised on 2019.1.2. If you find this article helpful, please like and follow my GitHub blog. Thank you very much!

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.