两栏布局三种方法（亲测有效）

第一种：

只需要两个div就能实现，主要原理是将第一个div设为浮动，并加上宽度，然后就可以实现两栏布局，并不需要设置第二个div的任何东西。代码如下：

                    div{
          height:500px;
        }
        #aside{
          width:300px;
          background-color:yellow;
          float:left;
        }
        #main{
          background-color:aqua;
          /*margin-left:300px;*/
          /*float: left;*/
        }

            <div id = "aside" onclick="console.log(1)" contenteditable="true"></div>
    <div id = "main" onclick="console.log(2)" contenteditable="true"></div>

第二种：

需要三个div，一个做为父元素，两个座位子元素，将父元素设为相对定位，两个子元素设为绝对定位，然后将上边的子元素设置宽度，将下边的子元素设置left为上子元素的宽度值。right设置为0；就嫩实现啦，代码如下：

            .cont{
        position: relative;
        width: 100%;
        height: 500px;
    }
    .left{
        position: absolute;
        width: 300px;
        height: 100%;
        background: red;
    }
    .right{
        height: 100%;
        background: blue;
        position: absolute;
        left:300px;
        right: 0;
    }
    
        <div class="cont">
    <div class="left"></div>
    <div class="right"></div>
        </div>

第三种：

使用弹性盒模型。三个div，父元素设置为display:flex;,上子元素为flex:3；或者设置固定宽度，下子元素为flex:7或者1；代码如下：

            .max{display: flex;width: 100%;height: 500px;}
    .left{flex: 3;height:100%;background: red;}
    .right{flex: 7;height: 100%;background: blue;}

        <div class="max">
    <div class="left"></div>
    <div class="right"></div>
    </div>