Skip to content

Instantly share code, notes, and snippets.

@shimar

shimar/index.html

Created November 16, 2017 04:31
Show Gist options
  • Save shimar/40dbda00fe983814bbfc6f1d4923db04 to your computer and use it in GitHub Desktop.
Save shimar/40dbda00fe983814bbfc6f1d4923db04 to your computer and use it in GitHub Desktop.
Download ZIP
html layout with fixed navbar, sidebar and main content.
Raw
index.html
<!doctype html>
<html>
<head>
<style type="text/css">
html, body {
padding: 0;
margin: 0;
width: 100%;
}
body {
background-color: white;
}
#wrapper {
height: 100%;
position: relative;
}
.navbar {
background-color: blue;
left: 200px;
height: 30px;
position: fixed;
top: 0;
width: 100%;
}
.sidebar-wrapper {
height: 100%;
left: 0;
position: fixed;
top: 0;
width: 200px;
}
.sidebar {
background-color: green;
height: 100%;
}
.main-wrapper {
margin-left: 200px;
margin-top: 30px;
}
.main {
background-color: pink;
}
</style>
</head>
<body>
<div id="wrapper">
<nav class="navbar">
Navbar
</nav>
<div class="sidebar-wrapper">
<div class="sidebar">
Sidebar
</div>
</div>
<div class="main-wrapper">
<div class="main">
Main
</div>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment