Hosting Solutions
mobile_logo Table of Contents
seal_frontseal_back

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
thumb