Putting a table at the bottom of the page.

Keeping it at the bottom without being part of the main table.

[theadvocate]

Hi All,

I am trying to find out if there is a way to align a table to always remain at the bottom of the page without being part of the main table.

I know how to make a single main table, set it to 100% height, put the small cell at the bottom and put the rest of the information in the top section.

But the problem with doing this is it puts everything in a single table and makes it slow to load. I need to be able to float the table down to the bottom of the browser page without it being connected to the main table.

Then no matter the size of your page, the table remains at the bottom (unless the viewing area is too small).

Is this possible?

Thanks!

[mivox]

For a plain html layout, just put the bottom table below the main table in the html... any reason that won't work in your case? It always worked for me.

[theadvocate]

Hi Mivox

Just putting the table below the main table won't work because what would you set the table percentage to so it remains at 100%?

I am trying to keep the bottom cell on the bottom of the page no matter if the page is 800 pix high or 1000 pix high. The only way I know to do that is to set the table to 100% and put the cell at the bottom of the table, but that won't work for the reasons stated above.

I know there is a way to make a cell right align or left align without it being attached to another table, so I am hoping someone knows of a way to bottom align one.

[birdbrain]

Hi there theadvocate,

Put this in the 'head' section...

<style type="text/css">
<!--
table
{
position:absolute;
bottom:0%;
left:40%;
border: double 6px #000000;
}
//-->
</style>

and this in the body section...

<table><tr>
<td>this table is 0% up from the bottom</td>
</tr></table>

birdbrain

[theadvocate]

Hi Bird Brain,

That's what I am looking for, but a couple of more questions.

First, I am using a style sheet so can I just put the data into there?

Second, how do I define it for only that table? Just looking at the CSS it looks like it will do it to all tables.

Thanks!

[MonkeeSage]

To get the styling to apply to only that element, use a class rule in your current stylesheet...

.bottom { 
  position: absolute; 
  bottom: 0px;  
}

Then in your HTML use the class attribute to specify the class rule(s) to apply from your stylesheet...

<table class="bottom" ...>

Ps. Relative positioning ('position: relative;') could be used instead of absolute positioning.

Jordan

[theadvocate]

Thanks MS!