Skip to content

Instantly share code, notes, and snippets.

@fredmp

fredmp/fluid-layout-example.html

Created September 11, 2016 03:08
Show Gist options
  • Save fredmp/09c88b766e2912f1cb8e6753def62bab to your computer and use it in GitHub Desktop.
Save fredmp/09c88b766e2912f1cb8e6753def62bab to your computer and use it in GitHub Desktop.
Download ZIP
HTML - Fluid Layout Example - Header-3-Columns-Sticky-Footer
Raw
fluid-layout-example.html
<html>
<head>
<title>Fluid Layout Example - Header-3-Columns-Sticky-Footer</title>
<style type="text/css" href="https://necolas.github.io/normalize.css/4.1.1/normalize.css"></style>
<style type="text/css">
html, body {
margin: 0;
}
html {
font-size: 16px;
}
body {
background-color: #FBFBFF;
color: #686868;
font-family: sans-serif;
width: 100%;
display: table;
min-height: 100%;
text-align: center;
position: relative;
}
header {
background-color: #4BAFF2;
height: 5em;
}
footer {
background-color: #5C90B2;
color: white;
position:absolute;
bottom:0;
width:100%;
height: 7em;
}
aside {
background-color: #A7C6DA;
width: 15%;
height: 37.5em;
display: inline-block;
padding-bottom: 6.25em;
margin-top: 0.5em;
vertical-align: top;
}
main {
background-color: #70C5FF;
display: inline-block;
padding-bottom: 6.25em;
padding-top: 1em;
margin: 0.5em;
overflow: hidden;
width: 68%;
}
nav {
background-color: #CFEAFC;
display: inline-block;
width: 68%;
height: 100%;
}
a {
text-decoration: none;
color: #686868;
}
.navbar-area-opened {
background-color: #A7C6DA;
display: table;
float: right;
height: 100%;
}
.navbar-area-collapsed {
display: none;
}
.navbar-area-opened ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.navbar-area-opened ul li {
display: inline;
padding: 0 0.6em 0 0.6em;
}
.logo {
background-color: #A7C6DA;
display: table;
float: left;
height: 100%;
}
.logo-img, .navbar {
display: table-cell;
text-align: center;
vertical-align: middle;
width: auto;
}
@media screen and (max-width: 1024px) {
nav {
width: 100%;
}
main {
width: 98%;
margin-left: 0.2em;
margin-right: 0.2em;
padding-bottom: 0.25em;
}
.left-sidebar {
display: none;
}
.navbar-area-collapsed {
background-color: #A7C6DA;
display: table;
float: right;
height: 100%;
}
.menu-link-collapsed {
display: table-cell;
text-align: center;
vertical-align: middle;
width: auto;
}
.right-sidebar {
padding: 0;
margin: 0;
float: left;
width: 100%;
height: 7em;
margin-bottom: 7em;
text-align: center;
}
.navbar-area-opened {
display: none;
}
.navbar-collapsed {
background-color: #A7C6DA;
width: 100%;
margin-top: 5em;
height: 5em;
display: table-cell;
color: white;
position: absolute;
}
.navbar-area-opened ul {
text-align: center;
width: 75em;
height: 5em;
}
.navbar-area-opened ul li {
display: list-item;
padding: 0;
}
}
</style>
</head>
<body>
<header class="header">
<nav>
<div class="logo">
<span class="logo-img">Logo Image</span>
</div>
<div class="navbar-area-collapsed">
<a href="#" class="menu-link-collapsed" id="toggle-menu">Open Menu</a>
</div>
<div class="navbar-area-opened">
<ul class="navbar">
<li><a href="#" id="add">Add Content</a></li>
<li><a href="#" id="remove">Remove Content</a></li>
<li><a href="#" id="remove-all">Remove All Content</a></li>
</ul>
</div>
</nav>
</header>
<aside class="left-sidebar">
Left Sidebar
</aside>
<main class="content">
Content
<section id="content-example">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eros ipsum, sollicitudin in arcu sollicitudin, sodales placerat justo. Etiam nec consequat tellus. Pellentesque vestibulum interdum cursus. Vivamus gravida ligula ullamcorper ex finibus, ac suscipit urna faucibus. Morbi dictum accumsan augue et pellentesque. Nulla lobortis molestie lacus, sed posuere lorem porta in. In pulvinar ultrices augue, ac tempus enim ullamcorper at. Etiam suscipit dictum augue nec tempus.
</p>
<p>
Maecenas vestibulum porta mattis. Aliquam nec ipsum sed metus cursus placerat at vitae lacus. Praesent tincidunt, ex ac dictum interdum, velit neque sodales tortor, ac consectetur odio mi sagittis odio. Proin at diam ut ligula elementum pellentesque ut ut metus. Fusce at nibh nulla. In hac habitasse platea dictumst. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Fusce luctus, velit et tincidunt sollicitudin, quam velit dapibus augue, ac vulputate sem velit a neque. Sed vel mollis dui, eget congue nisl. In imperdiet orci quis nibh convallis rhoncus. Mauris porta tellus vitae tempor mattis. Sed vel odio at odio tincidunt pellentesque. Suspendisse vitae faucibus velit, et eleifend nisi. Donec nec purus tincidunt, elementum sapien non, aliquet massa.
</p>
</section>
</main>
<aside class="right-sidebar">
Right Sidebar
</aside>
<footer>
Footer
</footer>
<script src="https://code.jquery.com/jquery-3.1.0.min.js" integrity="sha256-cCueBR6CsyA4/9szpPfrX3s49M9vUU5BgtiJj06wt/s=" crossorigin="anonymous"></script>
<script type="text/javascript">
$("#toggle-menu").on("click", function() {
$(this).text() === "Open Menu" ? $(this).text("Close Menu") : $(this).text("Open Menu");
$(".navbar-area-opened").toggleClass("navbar-collapsed");
});
$("#remove-all").on("click", function() {
$("main section.content-example").remove();
});
$("#remove").on("click", function() {
$("main section.content-example:last-child").remove();
});
$("#add").on("click", function() {
$("#content-example").clone().addClass("content-example").appendTo("main");
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment