<div id="top">
  <div id="left">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eget magna fermentum iaculis eu non diam. Venenatis urna cursus eget nunc scelerisque viverra mauris in aliquam. Semper auctor neque vitae tempus quam. Aliquam nulla facilisi cras fermentum odio eu feugiat pretium. 
  </div>
  <div id="right">
    Mattis enim ut tellus elementum sagittis vitae et leo duis. Pulvinar pellentesque habitant morbi tristique. Nisl vel pretium lectus quam id leo in vitae. Semper feugiat nibh sed pulvinar. Aliquam sem fringilla ut morbi tincidunt. Ultrices mi tempus imperdiet nulla malesuada pellentesque elit. Id velit ut tortor pretium viverra suspendisse potenti nullam ac. Id diam maecenas ultricies mi eget.
  </div>
  <div id="middle">
    Ut faucibus pulvinar elementum integer. Condimentum lacinia quis vel eros donec. Egestas erat imperdiet sed euismod nisi porta lorem mollis aliquam. Gravida quis blandit turpis cursus. Eget dolor morbi non arcu risus quis varius quam quisque. Id velit ut tortor pretium viverra suspendisse potenti nullam. Eget nulla facilisi etiam dignissim diam quis enim. At lectus urna duis convallis convallis tellus. Tellus id interdum velit laoreet id. Dignissim suspendisse in est ante in.
  </div>
  <div id="bottom">
    Mauris augue neque gravida in fermentum et sollicitudin ac orci. Vehicula ipsum a arcu cursus vitae congue mauris rhoncus aenean. Amet risus nullam eget felis eget nunc lobortis. Elementum curabitur vitae nunc sed velit dignissim sodales ut eu. Gravida cum sociis natoque penatibus et magnis. Convallis posuere morbi leo urna molestie at. Ac auctor augue mauris augue neque gravida in. Malesuada fames ac turpis egestas sed tempus urna et. Suscipit tellus mauris a diam maecenas sed enim ut sem. Nunc mattis enim ut tellus elementum sagittis vitae et leo. Blandit turpis cursus in hac. Velit euismod in pellentesque massa placerat duis. Risus sed vulputate odio ut enim blandit volutpat. Lorem donec massa sapien faucibus et molestie. Aliquet lectus proin nibh nisl condimentum id venenatis. Gravida rutrum quisque non tellus orci ac auctor augue mauris. Fermentum dui faucibus in ornare.
  </div>
* {
  margin: 0;
  padding: 0;
}

body {
  width: 960px;
  margin: 0 auto;
}

#top {
  overflow: hidden;
}

#left {
  float: left;
  width: 450px;
  background: #fff1e6;
}

#right {
  float: right;
  width: 510px;
  background: #dbe7e4;
}

#middle {
  background: pink;
}

#bottom {
  background: #bde0fe;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.