<div class="wrapper">  
  <div class="heading">
    header
  </div>
  <div class="body">
    <div class="img">ad</div>
    <div class="contents">
      <div class="about">about</div>
      <div class="news">news</div>
    </div>
    <div class="img">ad</div>
  </div>
  <div class="footer">
    copyright
  </div>
</div>
.wrapper {
  width: 1440px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}
.heading {
  background-color: #a9a9a9;
  padding: 16px;
}
.body {
  display: flex;
}
.img {
  width: 10%;
  background-color: #add8e6;
  padding: 16px;
}
.contents {
  width: 80%;
  display: flex;
  flex-direction: column;
}
.about {
  background-color: #98fb98;
  padding: 16px;
}
.news {
  background-color: #f5deb3;
  padding: 16px;
  text-align: right;
}
.footer {
  text-align: center;
  background-color: #e9967a;
  padding: 16px;
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.