Home/ Questions/Q 6860065
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-27T02:21:43+00:00

I’ve been away from marking up sites for some time. So, now we have

  • 0

I’ve been away from marking up sites for some time. So, now we have HTML5 and a lot of new features in CSS. I have a common site layout with fixed size header and footer. And of course main content area in between. By default page should take 100% of window height (i.e. content area expands). And if content is long page vertical scrollbar appears and all like usual.
Usually I used to do it by something like this:

<body>
   <table id="main" ...>
      <tr>
         <td id="header-and-content">
            <div id="header">contains logo, nav and has fixed height</div>
            <div id="content">actual content</div>
         </td>
      </tr>
      <tr>
         <td id="footer">
           fixed size footer
         </td>
      </tr>
   </table>
</body>

And accompanying css:

html, body { height:100% }
table#main { height:100% }
td#footer { height:123px }

So, it’s obsolete. You, who keeps abreast of new markup techniques, how it is done by now in 2011?

UPD People, issue not about semantic markup or using divs. I know what it does mean. Issue now in – how do I tell footer to stay at bottom even while content is empty or short. When content is long enough footer just go down as it would do in other case. Absolute and fixed is not the solution (at least at its basic form)

SOME SUMMARY UPDATE

  1. I’ve tried method with usage of display:table and display:table-row and it works: little content, more content
  2. Method Make the Footer Stick to the Bottom of a Page was adviced by Andrej. It works also: little content, more content

Some disappointment though I feel: first method is just those tables but without table tag. The second is really old, I’ve avoided to use it because it resembles hack. My god, nothing new 🙂

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Well, first of all in 2011 we dont use tables for layout anymore!

    If I were you, I would write the markup like so:

    <body>
   <div id="main" role="main">
        <header>
            contains logo, nav and has fixed height
        </header>
        <div class="content"> /*use <article> or <section> if it is appropriate - if not sure what to use, use a div*/
            actual content
        </div>
        <footer>
            fixed size footer
        </footer>
    </div>
</body>

    And the CSS would be the same except the changed selectors

    html, body { height:100% }
#main { height:100% }
footer { height:123px }

    For a fixed footer, I would suggest to use position:absolute or maybe position:fixed – it depends how you want it to behave (scroll with page or always stay at bottom).

    To make a “sticky” footer, that will be at the bottom of the page but move with the content, this method will do the trick.

    • 0