CSS two-column layout

Method 1: Set absolute positioning the left and right margins set left, and left of equal width size

//CSS部分：
        .contain{
            position :relative;
            height: 300px;
        }

        .left{
            position: absolute;
            left: 0;
            top: 0;

            width: 200px;
            height: 300px;
            background: red;
        }
        .right{
            /*Use Left Margin * / 
            margin-left : 200px ; 
            height : 300px by ; 
            background : Blue ; 
        } 

// HTML section: 
<div class = "Contain"> 
     <div class = "left"> left set width </ div> 
     < div class = "right"> the right adaptive </ div> 
 </ div>

Method 2: Set the left left floating, the right to hide overflowing content

.contain{
position :relative;
height: 300px;
}
.left{
float: left;
width: 300px;
height: 300px;
background:red;
}
.right{
overflow: hidden;
background: blue;
height: 300px;
}

<div class="contain">
     <div class="left">左边定宽</div>
     <div class = "right"> the right adaptive </ div> 
 </ div>

Method 3: Elastic Layout

.contain{
   display: flex;
}
.left{
    width: 200px;
    height: 200px;
    background: red;
}
.right{
    flex: 1;
    height: 200px;
    background:blue;
}

Method 4: left and right are set to float, width: calc ()

.contain {
    position: absolute;
    width: 100%;
    height: 100%;
}
.left {
    float: left;
    width: 200px;
    height: 100%;
    background-color: #72e4a0;
}
.right {
    float: left;
    width: calc(100% - 200px);
    height: 100%;
    background-color: #9dc3e6;
}

Final Results: