Implement a three-column layout (fixed on the left and right, adaptive width in the middle) and a three-Adaptive Layout

Implement a three-column layout (fixed on the left and right, adaptive width in the middle) and a three-Adaptive Layout

Html code (method 1 and method 2 ):

<Div class = "left"> left fixed area </div> <div class = "right"> right fixed area </div> <div class = "mid"> intermediate adaptive area </div>

 

Css code:

Method 1 (positioning ):

.left {  position: absolute;  top: 0;  left: 0;  width: 100px;  height: 200px;  background-color: red; } .mid {  margin-left: 100px;  margin-right: 200px;  height: 200px;  background-color: blue; } .right {  position: absolute;  top: 0;  right: 0;  width: 200px;  height: 200px;  background-color: yellow; }

 

Method 2 (floating ):

.left { float: left; width: 100px; height: 200px; background-color: red;}.mid { height: 200px; background-color: blue;}.right { float: right; width: 200px; height: 200px; background-color: yellow;}

 

Method 3 (negative margin ):

Html code:

<Div class = "center fl"> <div class = "mid"> intermediate adaptive area area intermediate adaptive area </div> <div class = "left fl"> left fixed area </div> <div class = "right fl"> right fixed area </div>

 

Css code:

.fl { float: left; }.center {  width: 100%;  height: 200px;  background: yellow;}  .center .mid{    margin-right: 100px;    padding: 0 110px;  }.left{    margin-left: -100%;    width: 100px;    height: 200px;    background: green;}.right{    margin-left: -200px;    width: 200px;    height: 200px;    background: blue;}