Fixed Header and Footer Div Layout Tutorial

Learn to create a fixed header and footer web page layout using CSS to pin the div elements exactly where you want them to live on the page. <!DOCTYPE html> <html> <head> <style> body { background-color: #CCC; margin:48px 0px 0px 64px; } div#topdiv { position:fixed; top:0px; left:0px; width:100%; color:#CCC; background:#333; padding:8px; } div#bottomdiv { position:fixed; bottom:0px; left:0px; width:100%; color:#CCC; background:#333; padding:8px; } </style> </head> <body> <div id="topdiv">Top div content</div> <h1>Page Heading</h1> <p>Content placeholder ...</p> <p>Content placeholder ...</p> <p>Content placeholder ...</p> <p>Content placeholder ...</p> <p>Content placeholder ...</p> <p>Content placeholder ...</p> <p>Content placeholder ...</p> <p>Content placeholder ...</p> <p>Content placeholder ...</p> <p>Content placeholder ...</p> <p>Content placeholder ...</p> <p>Content placeholder ...</p> <p>Content placeholder ...</p> <p>Content placeholder ...</p> <p>Content placeholder ...</p> <p>Content placeholder ...</p> <p>Content placeholder ...</p> <p>Content placeholder ...</p> <p>Content placeholder ...</p> <p>Content placeholder ...</p> <p>Content placeholder ...</p> <p>Content placeholder ...</p> <p>Content placeholder ...</p> <p>Content placeholder ...</p> <p>Content placeholder ...</p> <p>Content placeholder ...</p> <p>Content placeholder ...</p> <p>Content placeholder ...</p> <p>Content placeholder ...</p> <div id="bottomdiv">Bottom div content</div> </body> </html>

CSS Videos

Background and Overlay Effects

Multiple Background Images TutorialTheater Mode Overlay Tutorial Javascript Light Switch Toggle DarkFixed Header and Footer Div Layout TutorialLinear Gradient Background TutorialRadial Gradient Background TutorialVideo Background Tutorial Plus Youtube Embed
Snap to Top
Home Page
Table of Contents
Donate / Support
Web Hosting
Terms of Use

webintersect.com
adamkhoury.com
© 2015 All Rights Reserved