Layout (float)

by Daniel Beff

HTML

<main>
  <div class="left">
    <div class="header">
      Header
      <p>Complex layout</p>
      <p>Description</p>
    </div>
    <div class="gallery">Gallery</div>
    <div class="details">
      Details
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo rerum alias illum praesentium maxime sed nisi ex vero velit laudantium iste accusantium nulla fugit quam rem in nemo, est veritatis!
      </p>
    </div>
  </div>
  <div class="sellers">Sellers
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo rerum alias illum praesentium maxime sed nisi ex vero velit laudantium iste accusantium nulla fugit quam rem in nemo, est veritatis!
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo rerum alias illum praesentium maxime sed nisi ex vero velit laudantium iste accusantium nulla fugit quam rem in nemo, est veritatis!
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo rerum alias illum praesentium maxime sed nisi ex vero velit laudantium iste accusantium nulla fugit quam rem in nemo, est veritatis!
    </p>
  </div>
</main>

SCSS

main {
  display: flex;
  width: 100%;
}

.left {
  flex: 1
}

.sellers {
  flex: 0 0 300px;
}

.header {
  display: block;
  float: right; 
  width: 60%;
  background: #56b5f6;
}

.gallery {
  float: left;
  width: 40%;
  background: pink;
}

.details {
  float: right;
  width: 60%;
  background: gray;
}