1, Two column layout, fixed width on the left and adaptive on the right
//html <div id="left">Left fixed width</div> <div id="right">Right adaptive,Front end front end front end front end front end front end front end</div>
1. Float on the left and add oveflow:hidden on the right; become BFC Clear the influence of floating elements on the left
#left{
float: left;
width: 200px;
background: green;
}
#right{
overflow: hidden;
background: red;
}
2. Three column layout, Holy Grail layout and double wing layout
The Holy Grail layout and double wing layout are important layout methods that front-end engineers need to master daily. The functions of the two are the same. Both are to realize a three column layout with fixed width on both sides and adaptive width in the middle. (load rendering first in the middle)
The Holy Grail layout comes from the article In Search of the Holy Grail, while the double wing layout comes from Taobao UED. Although their implementation methods are slightly different, they both follow the following points:
Fixed width on both sides and adaptive width in the middle
The middle part takes precedence over the DOM structure for first rendering
Allow any of the three columns to be the highest column
Just use an additional < div > outer label
Grail layout
1. DOM structure
<div id="header"></div> <div id="container"> <div id="center" class="column"></div> <div id="left" class="column"></div> <div id="right" class="column"></div> </div> <div id="footer"></div>
First, define the DOM structure of the whole layout. The main part is the three columns of center, left and right wrapped by container, of which center is defined in the front.
2. CSS code
Assuming that the fixed width on the left is 200px and the fixed width on the right is 150px, set it on the container first:
#container {
padding-left: 200px;
padding-right: 150px;
}
Then set the width and float for the three columns respectively, and clear the float for the footer:
#container .column {
float: left;
}
#center {
width: 100%;
}
#left {
width: 200px;
}
#right {
width: 150px;
}
#footer {
clear: both;
}
According to the floating characteristics, since the width of the center is 100%, that is, it occupies all the space in the first row, so left and right are "squeezed" into the second row.
The next work is to place the left in the previously reserved position, where the negative outer margin is used:
#left {
width: 200px;
margin-left: -100%;
}
Then you need to use the position method:
#left {
width: 200px;
margin-left: -100%;
position: relative;
right: 200px;
}
Here, position: relative and right: 200px are used to move the left position 200px to the left based on the original position to complete the placement of the left:
Next, place right, just add a declaration:
#right {
width: 150px;
margin-right: -150px;
}
At this point, the layout effect is completed. However, the last step needs to be considered, that is, the minimum width of the page: to ensure the normal display of the layout effect, since both sides have a fixed width, it is necessary to give a minimum width of the page, but this is not just a simple 200+150=350px. Recall that left used position: relative before, which means that there is still a left width in the area where the center starts. Therefore, the minimum width of the page should be set to 200+150+200=550px:
body {
min-width: 550px;
}
To sum up, the CSS code of the Holy Grail layout is:
body {
min-width: 550px;
}
#container {
padding-left: 200px;
padding-right: 150px;
}
#container .column {
float: left;
}
#center {
width: 100%;
}
#left {
width: 200px;
margin-left: -100%;
position: relative;
right: 200px;
}
#right {
width: 150px;
margin-right: -150px;
}
#footer {
clear: both;
}
Dual wing layout
1. DOM structure
<body>
<div id="header"></div>
<div id="container" class="column">
<div id="center"></div>
</div>
<div id="left" class="column"></div>
<div id="right" class="column"></div>
<div id="footer"></div>
<body>
The difference between the DOM structure of the double flying wing layout and the Holy Grail layout is that only the center is wrapped with the container, and the. column class is moved from the center to the container.
2. CSS code
According to the same idea as the Holy Grail layout, first set the width and float of each column, reserve space for the left and right columns, and set float clear for footer:
#container {
width: 100%;
}
.column {
float: left;
}
#center {
margin-left: 200px;
margin-right: 150px;
}
#left {
width: 200px;
}
#right {
width: 150px;
}
#footer {
clear: both;
}
In the above code, the container, left and right are set to float: left. In the container, since the center does not set float, its width defaults to 100% of the container's width. By setting margin left and margin right, space is reserved for the left and right columns.
Place left in the reserved position:
#left {
width: 200px;
margin-left: -100%;
}
Place right in the reserved position:
#right {
width: 150px;
margin-left: -150px;
}
Finally, calculate the minimum page width: since position:relative is not used for positioning in the dual wing layout, the minimum page width should be 200+150=350px. However, when the page width is reduced to about 350px, it will occupy the width of the middle column, so that its content is covered by the right column:
Therefore, when setting the minimum page width, you should appropriately increase some width for the middle column (assuming 150px), then:
body {
min-width: 500px;
}
So far, the layout of the two wings has been completed! The overall code of its layout is:
body {
min-width: 500px;
}
#container {
width: 100%;
}
.column {
float: left;
}
#center {
margin-left: 200px;
margin-right: 150px;
}
#left {
width: 200px;
margin-left: -100%;
}
#right {
width: 150px;
margin-left: -150px;
}
#footer {
clear: both;
}
Summary and thinking
Through the introduction of the Holy Grail layout and the double flying wing layout, it can be seen that the Holy Grail layout is more intuitive and natural in the DOM structure, and it is easier to form such a DOM structure in the daily development process (usually < aside > and < article > / < section > are nested in < main >); The dual wing layout is more concise in implementation because it does not need to use positioning, and the minimum allowable page width is usually smaller than the Holy Grail layout.