SOURCE

<div class="one">
  <span></span>
  <span></span>
</div>
<div class="content">
  <div class="sider">
    <div class="two">
      <span>2222</span>
      <span class="first">3333</span>
    </div>
    <div class="three">
      <span>6555</span>
      <span>4444</span>
    </div>
  </div>

  <div class="main">
    <div class="four"></div>
  </div>
</div>

.one {
  color: red;
  margin: 0 auto;
  width: 700px;
  height: 50px;
  border: 1px solid red;
}

.two {
  width: 230px;
  height: 300px;
  border: 1px dotted black;
  margin: 100px;
}

.three {
  width: 230px;
  height: 300px;
  border: 1px dotted green;
  margin: 100px;
}

.four {
  width: 500px;
  height: 300px;
  border: 1px solid orange;
  margin: 0 auto;
}


/* layout */

.content {
  width: 960px;
  margin: 0 auto;
  font-size: 0;
}
.sider {
  float: left;
}
.main {
  padding-top: 100px;
  margin-left: 300px;
}