How To Create a Fixed Header and Footer Layout In HTML
Coding,  Design,  HTML

How To Create a Fixed Header and Footer Layout In HTML

There are multiple advantage of using a fixed Header and Footer in your webpage. You can put your navigation and social media profile links in header and footer and it will be always visible to users. With fixed header when your visitor reads your post and come to the end then from there he can go to other section of your website and this way user engagement will increase.

In this post i will create a simple page layout with Fixed Header and Footer using basic HTML and CSS code. You can use given code snippet to modify the design.

How To Create a Fixed Header and Footer Layout In HTML

I will use the HTML div tag and apply CSS property position:fixed to achive this.
You need to create two div tags, one for Fixed Header and another one for Fixed Footer. Your page layout should look like below code, put given code inside body section of webpage.

Here div tags with id fixedheader and fixedfooter will be used as your page header and footer. You can put your navigation links and social media profiles inside these header and footer.

<div id="fixedheader">Top div content</div>

<h1>Page Heading</h1>
<p>Content placeholder ...</p>

<div id="fixedfooter">Bottom div content</div>

Now we need to apply CSS code to these div id, we can do that by adding below code in head section of the webpage

<style type="text/css">
body {
	background-color: #CCC;
	margin:80px 80px 100px 100px;
div#fixedheader {
div#fixedfooter {

In the above CSS code i have used the CSS property position:fixed for both header and footer div, when user will scroll the page then your header and footer will always be visible to him.

After adding all the above code your webpage should look like this

Fixed Header and Footer Layout Demo

I have given very simple code so that it will be very easy to understand, you can use this as a reference and apply your imagination to design your version of cool header and footer for your website.

Please add important points from your side in the comments. Also if you are interested to submit any article, you can do so by visiting here Join CodingByte


  • Peter

    no even close … if you don’t set rules for the content section they will start a 0 because a fixed element is not part of the document flow.

    • George

      Actually, he did set rules for the content by applying the margins to the body (assuming he hadn’t edited his post since your comment).
      As you noted, position:fixed takes the header and footer out of the document flow, in effect pasting them over top of the body in the stated positions “relative to the browser window”. So, in his example, the content still shows from underneath because the top margin moves it lower than the header and the bottom margin keeps it above the footer.
      The problem with this approach is responsive. Try putting a large amount of text in the header (an H1 title and H2 subtitle is not uncommon). Now resize the browser window. As the header text wraps, the header div expands in height, cutting off more of the body. This could eventually overlap the content, meaning that you need to increase the margins even more, which then becomes wasted space on the screen when your browser is at a normal size.
      You could start adding multiple media queries with min-width requirements that scale the font sizes to try and maintain a consistent height. Or to adjust the body margins accordingly to push the content down even farther. Or a combination of both.
      This can get pretty complicated pretty quickly, as you have to account for font size differences between browsers/platforms, font substitution if the user doesn’t have the specified font, and most importantly, where the line wraps occur. (Again, accounting for every possible browser/device/platform…) You either end up with a lot of queries with various min-widths, or you select a few widths and make drastic changes at each to accommodate a wider rage of widths.
      So this basic example works. But it needs a lot of tweaking and media queries to work with anything beyond a simple webpage.

Leave a Reply

Your email address will not be published. Required fields are marked *