<div id="wrap">
  <div id="header">
    <div class="container">
      <div class="inheader"></div>
    </div>
  </div>
  <div id="nav">
    <div class="container">
      <div class="innav"></div>
    </div>

  </div>
  <div id="aside">
    <div class="container clearfix">
      <div class="inaside1"></div>
      <div class="inaside2"></div>
      <div class="inaside3"></div>
      <div class="inaside4"></div>
    </div>

  </div>
  <div id="footer">
    <div class="container">
      <div class="infooter"></div>
    </div>

  </div>
</div>
* {
  margin: 0;
  padding: 0;
}
#wrap{
  width: 100%;

}
#header{
  width: 100%;
  height: 100px;
  background-color: #EEEBE9;
}
#header .inheader {
  width: 1200px;
  height: 100px;
  background-color: #D5CCC9;
  float: left;

}
#nav{
  width: 100%;
  height: 100px;
  background-color: #B9AAA5;
  float: left;
}
#nav .innav{
  width: 1200px;
  height: 100px;
  background-color: #9D8980;
  float: left;
}
#aside{
  width: 100%;
  height: 780px;
  background-color: #886F65;
  float: left;
}
#aside .inaside1 {
  width: 100%;
  height: 100px;
  background-color: #74574A;
  float: left;
}
#aside .inaside2 {
  width: 100%;
  height: 200px;
  background-color: #684D43;
  float: left;
}
#aside .inaside3 {
  width: 50%;
  height: 480px;
  background-color: #594139;
  float: left;
}
#aside .inaside4 {
  width: 50%;
  height: 480px;
  background-color: #4A352F;
  float: left;
}
#footer{
  width: 100%;
  height: 100px;
  background-color: #4E342E;
  float: left;
}
#footer .infooter{
  width: 100%;
  height: 100px;
  background-color: #3E2723;
  float: left;
}
.container{
  width: 1200px;
  height: inherit;
  background-color: rgba(0, 0, 0, 0.3);
  overflow: hidden;
  margin: 0 auto;
}

/* <!-- float으로 인한 영역깨짐 방지법 --> 
1. 꺠지는 영역에 clear:both를 설정한다.
2. 부모 박스 영역에 overflow: hidden을 설정한다.
3. clearfix를 설정한다. (.clearfix::before)
*/
.clearfix::before,
.clearfix::after{
  content: '';
  display: block;
  line-height: 0;;
}
.clearfix::after{
  clear: both;
}

@media (max-width: 1220px){
  .container {
    width: 96%;
  }
  #aside .inaside1{
    width: 30%;
    height: 780px;
    float: left;
  }
  #aside .inaside2{
    width: 70%;
    height: 390px;
    float: left;
  }
  #aside .inaside3{
    width: 35%;
    height: 390px;
    float: left;
  }
  #aside .inaside4{
    width: 35%;
    height: 390px;
    float: left;
  }
}
@media(max-width: 768px){
  .container{
    width: 100%;
  }
  #aside .inaside1{
    width: 30%;
    height: 780px;
  }
  #aside .inaside2{
    width: 70%;
    height: 260px;
  }
  #aside .inaside3{
    width: 70%;
    height: 260px;
  }
  #aside .inaside4{
    width: 70%;
    height: 260px;
  }
}
@media(max-width: 480px){
  #aside .inaside1{
    width: 100%;
    height: 150px;
  }
  #aside .inaside2{
    width: 100%;
    height: 210px;
  }
  #aside .inaside3{
    width: 100%;
    height: 210px;
  }
  #aside .inaside4{
    width: 100%;
    height: 210px;
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.