FloatingLayout

Laioffer HW1, using float to layout

by Serena Liu

HTML

<div class="wrap">
  <div class="sidebar_left">
    <p>
      Lorem ipsum dolor sit amet, eligendi perfecto vituperata vis ne, ad qui zril utamur. Vix eros legere argumentum cu, per prima falli incorrupte at, eam ad alienum maiestatis democritum. Ut minimum convenire per, ut perpetua electram eam. Ea vel enim forensibus,
      usu populo mentitum singulis cu. Eam no libris commodo tractatos, ne dolor eloquentiam per.
    </p>
  </div>

<div class="sidebar_right">
    <p>
      Lorem ipsum dolor sit amet, eligendi perfecto vituperata vis ne, ad qui zril utamur. Vix eros legere argumentum cu, per prima falli incorrupte at, eam ad alienum maiestatis democritum. Ut minimum convenire per, ut perpetua electram eam. Ea vel enim forensibus,
      usu populo mentitum singulis cu. Eam no libris commodo tractatos, ne dolor eloquentiam per.
    </p>
    <p>
      An sea modus iuvaret. Minim putant omnium ius te. Pri ei tempor diceret voluptatibus, et est atqui mundi tollit. Ne has iisque singulis hendrerit. In pri magna persecuti interesset, et dicit definitionem mea, his ex singulis vulputate.
    </p>
  </div>
  
  <div class="content">
    <p>
      Lorem ipsum dolor sit amet, eligendi perfecto vituperata vis ne, ad qui zril utamur. Vix eros legere argumentum cu, per prima falli incorrupte at, eam ad alienum maiestatis democritum. Ut minimum convenire per, ut perpetua electram eam. Ea vel enim forensibus,
      usu populo mentitum singulis cu. Eam no libris commodo tractatos, ne dolor eloquentiam per.
    </p>
    <p>
      An sea modus iuvaret. Minim putant omnium ius te. Pri ei tempor diceret voluptatibus, et est atqui mundi tollit. Ne has iisque singulis hendrerit. In pri magna persecuti interesset, et dicit definitionem mea, his ex singulis vulputate.
    </p>
  </div>
</div>

CSS

* {
  box-sizing: border-box;
  margin: 0;
  padding:0;
}

/* Define container */
.wrap {
  position: relative; /*for background color filling whole column*/
  max-width: 800px;
  min-width: 600px;
  overflow: auto;
  border: 1px solid black;
}

/* Content Style */
.content:before {
  content: "";
  background-color: lightblue;
  z-index: -1;
  top: 0;
  bottom: 0;
  left: 200px;
  right: 200px;
  position: absolute;
}
.content {
  margin-left: 200px;
  margin-right: 200px;
  padding: 10px;
}

/* Left Sidebar */
.sidebar_left:before {
  content: '';
  top: 0;
  left:0;
  bottom:0;    /*for background color filling whole column*/
  width: 200px;
  background-color: plum;
  position: absolute;
  z-index: -1;
}

.sidebar_left {
  width: 200px;
  float: left;
  padding: 10px;
}

/* Right sidebar
 */
 .sidebar_right:before {
  content: '';
  top: 0;
  right:0;
  bottom:0;    /*for background color filling whole column*/
  width: 200px;
  background-color: pink;
  position: absolute;
  z-index: -1;
}

.sidebar_right {
  float: right;
  width: 200px;
  padding: 10px;
}