SOURCE

<div id='container'>
  <div id='main'>
  </div>
  <div id='left'>
  </div>
  <div id='right'>
  </div>
</div>
<div id='container1'>
  <div id='main1'>
    <div id='main-in'>
    </div>
  </div>
  <div id='left1'>
  </div>
  <div id='right1'>
  </div>
</div>

body,
html {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

#main {
  width: 100%;
  height: 200px;
  background: red;
  float: left;
  word-break: break-all;
}

#left {
  width: 100px;
  height: 200px;
  background: blue;
  float: left;
  margin-left: -100%;
  position: relative;
  left: -100px;
}

#right {
  width: 190px;
  height: 200px;
  float: left;
  margin-left: -190px;
  background: yellow;
  position: relative;
  right: -190px;
}

#container {
  width: 100%;
  height: 200px;
  padding: 0 190px 0 100px;
}

#main1 {
  width: 100%;
  height: 200px;
  background: red;
  float: left;
}

#left1 {
  width: 100px;
  height: 200px;
  background: blue;
  float: left;
  margin-left: -100%;
}

#right1 {
  width: 190px;
  height: 200px;
  float: left;
  margin-left: -190px;
  background: yellow;
}

#main-in {
  margin: 0 190px 0 100px;
  word-break: break-all;
}

#container1 {
  width: 100%;
  height: 200px;
  margin-top: 50px;
}