CSS positioning question

Question

Alright, I am currently working on this website, http://www.katiesamsonlaxfest.com/preview.html. I would like to add some contact information in the bottom left hand corner of the page (below the content area,to the left of the footer navigation on the background). I also want to be able to keep the footer navigation centered. Any suggestions?

Answer 1

The easiest way, given your layout, may be to position things with a relative positioning. IE - in your footer div, specify 2 more divs. Make one 20%ish width and the second 80%ish wide. Put the current footer in div 2, left-align the text, then adjust the percentages until everything lines up nicely.

Answer 2

Try this:

<div id="footer">
  <div id="left_footer">
    some content
  </div>
  <ul>
        <li><a href="http://www.katiesamsonlaxfest.com/index.html"&gt;Home&lt;/a&gt;&lt;/li&gt; 
        <li><a href="">The Event</a></li> 
        <li><a href="http://www.katiesamsonlaxfest.com/design.html"&gt; The Cause </a></li> 
        <li><a href=""> The Teams </a></li> 
        <li><a href=""> To Donate </a></li> 
        <li><a href=""> The Sponsors </a></li>
 </ul>
 <p> Copyright 2010, The Katie Samson Foundation</p>
</div>

I set footer to be positioned relative, and then the newly added div, left_footer, to be positioned absolute, left 0px, and top a few pixels down.

#footer
{
    position: relative;
}
#left_footer
{
    position: absolute;
    left: 0px;
    top: 28px;
}

Looks ok in Firefox and IE8.

Answer 3

Here's what I just came up with using JSBin: http://jsbin.com/exogi/edit

Seems to do exactly what you want, floats, and doesn't change the centering of your footer text. The important thing to note is that the margins on #footer are 0 for the up and down (can be changed) and left and right are equal to the width of #contact-info. In most browsers (I think IE6 & 7 don't like that) it should work pretty well.