Newbie - How do i put a block of colour at bottom of page

[dirtyholmes]

Hi,

Sorry i am very new to Html, and i am trying just to place a block of colour ( like a band ) going across the entire length of the bottom of the page, and taking up about 10% of the screens height, but i dont know how to do it.

Can someone please help.

MAny Thanks

 

[Vragabond]

The easiest way is to draw a table. CSS does not handle 100% height appropriately for your needs:

<table width="100%" height="100%" cellspacing="0" cellpadding="0" border="0">
  <tr>
     <td>&nbsp;</td>
  </tr>
  <tr>
     <td height="10%" style="background: red;">&nbsp;</td>
  </tr>
</table>

 

[dirtyholmes]

Thanks for that. One question though, so that i understand. How does that make the table stick to the bottom of the page ?

 

[Vragabond]

That expands the table across the whole page. Table has two rows, first row is variable in height while the second row takes up 10%. Since the table stretches across the whole page, the second row is at the bottom of the table. This is the only way to have dynamic height with something at the bottom of the screen.

If you only want it to stick to the bottom of the page, that is at the end of content, you should look into divs, positioning and css. Your solution would look like:

<style type="text/css">
 #content {
  position: relative;
  width: 100%;
  padding-bottom: 30px;
 }

 #footer {
  position: absolute;
  left: 0px;
  bottom: 0px;
  width: 100%;
  height: 25px;
  background: red;
 }
</style>

<div id="content">
  <div id="footer"></div>
</div>

 

[dirtyholmes]

Thanks for the tips.

 

[ChrisHunt]

Another way of putting a coloured bar across the bottom of the page, rather than use vrag's footer div, is to just use a border:

body {
   border-bottom: 25px solid red;
}

-- Chris Hunt

http://www.mcgonagall-online.org.uk

http://www.napitalia.org.uk

http://www.leicesteryha.org.uk