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

第一种：

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

                    div{
		  height:500px;
		}
		#aside{
		  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;
		 100%;
		height: 500px;
	}
	.left{
		position: absolute;
		 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; 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>