Skip to content

Instantly share code, notes, and snippets.

@andybrackley
Created January 23, 2020 18:54
Show Gist options
  • Save andybrackley/315805efd60a19bdae9ba4158902a318 to your computer and use it in GitHub Desktop.
Save andybrackley/315805efd60a19bdae9ba4158902a318 to your computer and use it in GitHub Desktop.
Web Page with fixed header and footer. Title is vertically centered with navBar aligned to the right-hand margin
<!DOCTYPE html>
<head>
<!-- Layouts -->
<style type="text/css">
.fixed-topleft {
position: fixed;
top: 0px;
left: 0px;
width: 100%;
}
.fixed-bottomleft {
position: fixed;
bottom: 0px;
left: 0px;
width: 100%;
}
.bannerArea, .footerArea {
display: flex;
/* This seems to do the align right of the navBar section */
justify-content: space-between;
}
main {
position: fixed;
/* Is there a way of calculating the top so that it'll appear below the banner div
without having to hard-code it */
top: 90px;
}
.padded-left {
margin-left: 30px;
}
.padded-right {
margin-right: 30px;
}
.inline {
display: inline-flex;
}
.inline-list li {
display: inline-block;
}
.vert-center {
align-items: center;
}
.footer-pad30 {
padding: 15px;
}
</style>
<!-- Styles -->
<style type="text/css">
body {
background-color: aquamarine;
}
.highlightAreaColors {
background-color: darkcyan;
color: white;
}
.bannerArea {
}
.navItems li {
background-color: cadetblue;
padding: 20px;
}
.navItems li:hover {
background-color: blue;
}
</style>
<title>Test HTML</title>
</head>
<body>
<header>
<div class="bannerArea highlightAreaColors fixed-topleft">
<div class="bannerLogo padded-left inline vert-center">BANNER LOGO</div>
<div class="navArea padded-right inline">
<ul class="navItems inline-list">
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
</ul>
</div>
</div>
</header>
<main>
<div>
Main
</div>
</main>
<footer>
<div class="footerArea highlightAreaColors fixed-bottomleft">
<div class="footer-pad30 inline vert-center">
Footer Display Left
</div>
<div class="padded-right inline vert-center">
Footer Display Right
</div>
</div>
</footer>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment