DashBoard layout

dashboard-layout.markdown

DashBoard layout

A Pen by TechQuery on CodePen.

License.

index.html

<header>Title</header>
<main>
  <nav>Navigator</nav>
  <div>
    <nav id="bread">Bread crumb</nav>
    <div id="content">
      <section>
        <span>Float layer</span>
      </section>
      <section></section>
      <section></section>
    </div>
  </div>
</main>

style.css

html, body {
  height: 100%;
  overflow: hidden;
  margin: 0;
}

body > header {
  height: 10%;
  background: red;
}
main {
  height: 90%;
}

main > * {
  float: left;
  height: 100%;
}
main > nav {
  width: 20%;
  background: lightblue;
}
main > div {
  width: 80%;
}

#bread {
  height: 10%;
  background: lightgreen;
}
#content {
  height: 90%;
  overflow: auto;
}
#content > section {
  height: 300px;
  background: yellow;
  position: relative;
}
#content span {
  position: absolute;
  z-index: 1;
  width: 10em;
  height: 10em;
  background: pink;
}