layout

by Yoshiharu Kamata

HTML

<div class="container">
  <nav>
    <ul>
      <li>a</li>
      <li>b</li>
      <li>c</li>
    </ul>
  </nav>
  <main>
    <h1>main content</h1>
  </main>
  <div class="sub">
    <h2>
      sub content
    </h2>
  </div>
  <div class="popup">
    <button class="close">&times;</button>
    <ul>
      <li>x</li>
      <li>y</li>
      <li>z</li>
    </ul>
  </div>
</div>

CSS

.container {
  display: flex;
  height: 100%;
}

.container nav {
  flex: 120px 1;
  background: lightgray;
}

.container .sub {
  flex: 200px;
  background: lightgray;
}

.container .popup {
  position: absolute;
  right: 0px;
  top: 20px;
  width: 190px;
  z-index: 1;
  background: white;
  box-shadow: -6px 6px 6px gray;
}

.popup button.close {
  position: absolute;
  right: 3px;
}