The holy grail layout

Application scenarios

  • Fixed width of content on both sides, adaptive content in the middle
  • A three-column layout with the middle column loaded and rendered first

Implementation method

float+margin

<div id="header">header</div>
<div id="content">
  <div id="center" class="column">center</div>
  <div id="left" class="column">left</div>
  <div id="right" class="column">right</div>
</div>
<div id="footer">footer</div>
Copy the code
body{
   min-width: 500px;
}
div{
  text-align:center; 
}
#header{
  background-color:#f1f1f1;
}
#content{
  /* Leave space for #Left and #Right */
  padding: 0 200px 0 300px;
}
#content #center{
  background-color:#ddd;
  width:100%;
}
#content #left{
  /* Right does not take effect */
  position:relative;
  background-color:red;
  width:300px;
  /* The width of the parent box is 100% */
  /* corresponds to moving left and right to the same position on the previous row */
  margin-left: -100%;
  /* Right sets the right edge of the element, so #left right edge is at 300px */
  right:300px;
}
#content #right{
  background-color:blue;
  width:200px;
  /* This setting makes the right box smaller by 200px, so it has no width to display */ on one line
  margin-right: -200px;
}
#content .column{
  float:left;
}
#footer{
  background-color:#f1f1f1;
  /* If no float is cleared, #footer will be on the same line as left and right */
  clear:both;
}
Copy the code

Twin wing layout

The principle and application scenarios are the same as above, which optimizes the relative positioning of the Grail layout, common in a treasure website.

<div id="main" class="column">
  <div id="main-wrapper">Main</div>
</div>
<div id="left" class="column">left</div>
<div id="right" class="column">right</div>
Copy the code
body{
  min-width: 500px;
}
div{
  text-align:center; 
}
#main{
  background-color: #ddd;
  width:100%;
}
#main #main-wrapper{
  margin:0 200px 0 300px;
}
#left{
  background-color:red;
  width:300px;
  margin-left: -100%;
}
#right{
  background-color:blue;
  width:200px;
  Margin-right = margin-right; margin-right = margin-right; margin-right = margin-right
  /* Instead of moving to the place vacated by the mian-wrapper element margin-right, it will be placed after the margin-right position */
  margin-left: -200px;
}
.column{
  float:left;
}
Copy the code

Reference data: www.bilibili.com/video/BV11y…