DevelopPHP.com
Web Development Training System

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>
FixedHeaderFooterDivLayout
Table of Contents Terms Of Use Subscribe Top ↑