Positioning Content at the bottom of a column

Say you have two columns, a left and a right column. The left column is to be the navigation are and the right column the content. This is standard for most web sites.

What happens when you want to add a footer to the left column? for example your contact details? sure you could add lots of padding and margins etc but that would break your accessibility. I had a customer that wanted this exact feature in SharePoint 2007 recently.

To be able to have two columns you have to have three divs, the container then the left and right columns.

To maintain accessibility standards and have a screenreader be able to see the navigation, then the content, then the footer you need to do something a bit more sneaky than just pad the navigation.

create your html as below

   <div id="Container">
      <div id="LeftNav">...</div>
      <div id="Content">...</div>
      <div id="LeftFooter">...</div>
   </div>

Now that you have the html you can style it using CSS.

#Container
{
   height: auto;
   width: 150em;
   margin: auto;
   clear: both;
   position: relative; /* you will see the importance of this shortly*/
}
#LeftNav
{
   width: 35em;
   float: left;
}
#Content
{
   width: 115em;
   float: right;
}
#LeftFooter
{
   position: absolute;
   left: 1em;
   bottom: 1em;
   width: 13em;
}

By setting the position of the container div to relative, you are then able to override any of its child containers using absolute values RELATIVE to the bounds of the container. This means that the left footer will always be at the bottom left (with a 1em margin) of its parent.