CSS implements two-column layout and css implements Layout

CSS implements two-column layout and css implements Layout
Preface

A two-column layout is a page layout that consists of the main bar and the sidebar. It is a layout of many web pages. CSS is generally used to implement the two-column layout.

There are multiple ways to implement the two-column layout. Here we use four common implementation methods. It mainly includes liquid layouts, Jello layouts, absolute layouts, and table layouts ).

All source codes are at the bottom.

Fluid layout

The browser displays HTML elements, starting from the top of the HTML file and displaying each element from the top down along the element stream, just like a fluid.

The page layout is as follows:

<Header> header ................. 
The effect is as follows:

To achieve the layout of the two columns, the left column of the page needs to float.
Div # section {float: left; // float the left bar of the page}
If the light float the left column, the display will be normal when the browsing width is sufficient. If the width is insufficient, the footer will be blocked.

At this time, we need to clear the float so that the footer will not be blocked.
Footer {clear: left; // clear float. The clear values include left/right/both, which are the float values on both sides}
Freeze Layout
Fluid layout when users lengthen or narrow down the browser, the page content will be wrapped. In many cases, this is not what we want to see. At this time, we need to freeze the page and use the freeze layout.
Freeze layout is to add a div and specify the width on the outermost layer of the Fluid layout.
<Div id = "allcontent"> // implement freeze layout 
Div # allcontent {width: pixel PX; // specify the width as pixel PX}
Gel Layout
When we use the freeze layout, the page will be docked on the left. to center the page, we need to use the gel layout.
The gel layout is to set the left and right margins of the div on the outermost layer of the page to auto. The page is centered regardless of the browser size.
    div#allcontent    {        width: 1200px;        margin-left: auto;        margin-right: auto;    }
Absolute Layout
Absolute layout is to use position: absolute to layout elements.
Position has four attributes. The default value is static, which means it will not be located. Absolute uses the nearest parent element for locating. Fixed uses a window to locate, that is, using a browser to locate. Relative uses the element itself to locate in the normal position.
You can use absolute positioning to specify certain pixels for the two-column layout to achieve absolute layout,
Div # aside {position: absolute; // absolute layout top: 170px; // It is 170px right: 0px from the top border of the parent element; // 0px width: 300px from the right border of the parent element; // specify the width}
Because the absolute positioning is to delete elements from the stream, changing the browser size will also cause the border to block the footer.
Table Layout
Table layout is to layout pages in the form of tables. Use display: table for implementation.
There are also <table> labels in HTML. Some people use <table> labels for table layout, but this is unreasonable. HTML is a hypertext markup language. Each tag has its own semantics to ensure a clear structure. Therefore, HTML should not be used for table layout, but CSS should be used for layout.
<Header> header ................. 
Table layout needs to use display: table in the outermost div
Div # tableContainer {display: table; // The outermost div is set to the table border-spacing: 10px; // The table layout has no margins, border-spacing is equivalent to margin} div # tableRow {display: table-row; // You can also set multiple rows.} div # section {display: table-cell; // set div to the cell background-color: rgb (93,173,226);} div # aside {display: table-cell; // set div to the cell background-color: rgb (133,146,158 );}
Conclusion
There are many ways to implement the layout. Which one can be used depends on the business needs? However, the two-column layout is suitable for table layout, generally, one layout is not used separately. Multiple la s are used at the same time to achieve the best effect.
Complete source code link: https://github.com/yijidao/layouts