[thelist] CSS : Aligning XHTML content to bottom of page

[Jason Hepi]

I try as much as possible to produce table-less layouts in my
projects/work - even more so when combined with an XHTML DOCTYPE, however
some designs that I receive necessitate aligning content to the bottom of
the page.

I could set position: absolute; bottom: 10px; for the content I wish to
align but then if the user views the page on a low screen resolution the
positioned content will overlap.

One solution I've used is to dynamically measure the available page area and
apply the px height to a DIV tag content container, using event listeners to
check if the page size has altered - on good DOM compliant browsers this
works really well - esp. if you can be sure of your user base, however for
the mainstream I think its probably not a great idea to rely on the user
having JavaScript enabled. I took a look at
http://www.thecounter.com/stats/2002/September/javas.php this morning and
was geek-shocked to see 11% of users don't have JavaScript enabled.

And so ... (disappointedly) the only solution I can think of is to use the
two row table set up with the top and bottom rows' valign attribute set to
"top" and "bottom" respectively. Of course for this to work a height
attribute has to be set to 100% within the TABLE tag ... and this doesn't
validate so all of your hard work that's gone into your XHTML layout has
gone to waste (you could argue - quite rightly - that the fact that you're
using a table in your XHTML layout in the first place i.e mixing content
with presentation, reduces the value of your XHTML also - however that isn't
a discussion I'm aiming to pick up with this email : ) )

Trawling through various Google results today I did however find the
following CSS and was wondering what people thought of it before I use it in
my current project:

  body {
  position: absolute;
  top: 0; left: 0;
  }

  body, #mytable {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  }

using XHTML 1.0 Transitional DOCTYPE, the table is defined as :

<table id="mytable">
 <tr valign="top">
  <td></td>
 </tr>
 <tr valign="bottom">
  <td></td>
 </tr>
</table>

Works in IE5.x, IE6, NS6, NS7, Mozilla 1.1, Opera 5


Thanks in advance for any thoughts on this,

Jason Hepi