Skip to content

Instantly share code, notes, and snippets.

@TechQuery
Created August 24, 2018 04:00
Show Gist options
  • Select an option

  • Save TechQuery/4a607b326c461a830dbfab170be9aa9b to your computer and use it in GitHub Desktop.

Select an option

Save TechQuery/4a607b326c461a830dbfab170be9aa9b to your computer and use it in GitHub Desktop.
DashBoard layout
<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>
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;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment