Positioning Content at the bottom of a column

Posted by (JavaScript must be enabled to view this email address) on Tue 07 Oct 2008

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


[code lang=HTML]
<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.

  1. #Container
  2. {
  3. height: auto;
  4. width: 150em;
  5. margin: auto;
  6. clear: both;
  7. position: relative; /* you will see the importance of this shortly*/
  8. }
  9. #LeftNav
  10. {
  11. width: 35em;
  12. float: left;
  13. }
  14. #Content
  15. {
  16. width: 115em;
  17. float: right;
  18. }
  19. #LeftFooter
  20. {
  21. position: absolute;
  22. left: 1em;
  23. bottom: 1em;
  24. width: 13em;
  25. }

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.

Your Comments

  1. Posted by Mauro Masucci on 10/21 at 02:22 PM

  2. you are then able to override any of its child containers using absolute values RELATIVE to the bounds of the container moncler
    moncler sale
    moncler coats
    moncler Jackets
    moncler store
    moncler uk
    Replica Watches
    Omega Replica
    Replica Rolex Watches
    Best Replica Watches
    Swiss Replica Watches

    Posted by Mauro Masucci on 11/04 at 08:01 AM

  3. the SSP to allow users to edit their own profiles
    Need evening dresses,or gowns? Formal evening dresses from dresses shop, evening gowns from dress4sale,Laundry and dress4sale
    Wedding dresses
    evening dresses
    evening dresses sale
    Dresses sale
    Wide collection of prom dresses, evening dresses and gowns, cocktail dresses, summer dress, 2010 summer dresses,
    little black dresses, beaded dresses
    Abercrombie & Fitch
    Abercrombie
    Abercrombie & Fitch clothes
    replica watches
    Abercrombie Fitch
    Abercrombie Fitch UK and take the from you.

    Posted by Mauro Masucci on 11/06 at 12:12 PM

  4. of enthusiasm from NASA, <u>replica cartier watch</u> NASA, Schulze-Makuch believes many people would be mulberry handbags be willing to make the sacrifice.He and replica designer shoes and Davies believe

    Posted by Mauro Masucci on 11/19 at 04:31 AM

  5. Posted by Mauro Masucci on 12/20 at 09:11 AM

  6. Party Dresses Beach Wedding Dresses White Wedding Dresses mother of the bride formal gowns, apparel, outfits in Austin, Texas. Discount modest mother of the groom dress in petite Informal Wedding Dresses Classic Wedding Dresses Fashion Wedding Dresses Elegant Wedding Dresses Sexy Wedding Dresses ordered 4 dresses to be used as bridesmaid dresses in a wedding. I have just received them and they are more beautiful than I imagined. The dresses were made with great skill and craftma Sweet Wedding Dresses Colored Wedding Dresses Red Wedding Dresses.

    Posted by Mauro Masucci on 12/25 at 02:33 AM

Commenting is not available in this section entry.
← Back to Blog Homepage

About our Blog

Brantas Limited specialise in Dynamics CRM, SharePoint and System Integration using the Microsoft Platform. We are all experienced developers in various fields with our own specialities complementing those of our team.

We have been working with SharePoint since 2003, including Installation and Administration, Migration, Development and Support.

Related Solutions

    No Related Posts Found

Related Case Studies

    No Related Posts Found