The three-column layout can be implemented by:

  1. Classic three-column layout: Positioning to achieve a three-column layout, floating to achieve a three-column layout.
  2. Grail implements a three-column layout
  3. Twin flying wings achieve a three-column layout

So what is a three-column layout?

Mainly on both sides of the fixed width, the middle adaptive, that is to say, a person as a page, head, feet, hands fixed, chest as the most central part, when you get fat, the most obvious part is the waist is particularly thick. In other words, the left and right hands are fixed, but the body can be large or small.

Basic requirements for a three-column layout :()

  1. The width of the two columns is fixed, and the middle column is adaptive
  2. The middle column is completely displayed
  3. Middle columns are loaded first

Let’s look at the first location to implement a three-column layout (left,right,middle document flow order doesn’t matter)

*{
    margin: 0;
    padding: 0;
}
body{
    width: 100%;
    height: 500px;

}
#left,#right{
    width: 200px;
    height: 100%;
    background: pink;
}
#left{
    position: absolute;
    left: 0;
    top: 0;
}
#right{
    position: absolute;
    right: 0;
    top: 0;
}
#middle{
    margin: 0 200px;
}
Copy the code

Leave the left and right at the same height as the parent container (height: 100%) and the middle at the same width as the left and right (margin: auto 200px)

Disadvantages:

How can I put it? If you exceed the height, it will occupy the space of the right (I’m not sure why it won’t occupy the space of the left).

Float implements a three-column layout

*{
    margin: 0;
    padding: 0;
}
body{
    width: 100%;
}
#left,#right{
    width: 200px;
    height: 200px;
    background: red;
}
#middle{
    height: 200px;
    background: green;
    /* overflow-y:scroll */
}
#left{
    float:left;
}
#right{
    float:right;
}

Copy the code

Set left to left (float: left) and right to right (float: right) HTML code note that the document flow is read from top to bottom and left to right. If you set middle between left and right, the following image appears

The left floats to the left: the middle, which has no width, will be read by the stream first and will be covered with a line, crowding out the right. So read float and right first, as shown below:

Also, if you set the scroll bar: the scroll bar will occupy the position right

Grail implements a three-column layout

First look at the implementation of the source code:

CSS:

*{
    margin: 0;
    padding: 0;
}
.wrap{
    min-width: 600px;
}
#header,#footer{
    height: 50px;
    width: 100%;
    background: grey;
}
#middel,#left,#right{
    float: left;
}
#content{
    overflow: hidden;
    padding: 0 200px;
}
#middel{
    background: red;
    width: 100%;
}
#left,#right{
    width: 200px;
    height: 200px;
    background: pink;
}
#left{
    margin-left: -100%;
    position: relative;
    left: -200px;
}
#right{
    margin-right:-200px
    /* margin-left: -200px; */
    /* position: relative;
    left: 200px; */
}
Copy the code

Notice that we set overflow:hidden here (this is supposed to be an overflow and truncate, but here we form a BFC region: what is a BFC region? I’ll post about BFC regions later.)

Our footer overlaps the last one. Margin-left: -100%; margin-left: -100%

This percentage is the percentage of the content length of the parent element, which needs to remove the padding Magin border. Since the length is set to 100% and a full-line width compensation margin is needed, move to the far left. (It may be hard to understand)

The downside: Grail layout, if there is too much text in one column, the text will overflow.

Both the Two-wing three-column layout and the Grail layout must be read with Middle as the document flow first (that is, middle is placed before left and float).

Let’s take a look at the HTML implementation:

<body>
    <div class="wrap">
        <div id="header">header</div>

        <div id="content">
            <div id="middle">
                <div class="middle-inner" >middle</div>
            </div>
            <div id="left">left</div>
            
            <div id="right">right</div>
        </div>
        <div id="footer">footer</div>
    </div>
</body>
Copy the code

CSS implementation:

*{
    margin: 0;
    padding: 0;
}
.wrap{
    min-width:600px;
}
#header,#footer{
    height: 50px;
    width: 100%;
    background: grey;
}

#left,#right{
    width: 200px;
    height: 200px;
    background: green;
}
#middle{
    background: blueviolet;
    width: 100%;
    float:left;
}
#content{
    overflow: hidden;
}
#left{
    float:left;
    margin-left:-100%;
    
}
#middle{
    height: 200px;
}
#right{
    float:left;
    margin-left: -200px;
}
.middle-inner{
    margin: 0 200px;
}

Copy the code

This is similar to the Holy Grail, but basically there’s a container inside the middle to hold the contents of the middle. In general, XDM ！！！！ Rest, CSS to really learn is really very difficult ah!!