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?
2
-
I might not be understanding properly, but your request is kind of contradictory: Adding info to the left of the nav would offset the navigation, no longer making it centered.sthg– sthg2010-02-02 02:26:16 +00:00Commented Feb 2, 2010 at 2:26
-
that is exactly the point, I need a workaround for it. I want the contact info to be floated left while the nav stays centered, I need a solutionDan– Dan2010-02-02 02:27:41 +00:00Commented Feb 2, 2010 at 2:27
Add a comment
|
3 Answers
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.
1 Comment
Dan
yeah I will see if that works, given the situation there probably isnt a way around nesting several divs
Try this:
<div id="footer">
<div id="left_footer">
some content
</div>
<ul>
<li><a href="http://www.katiesamsonlaxfest.com/index.html">Home</a></li>
<li><a href="">The Event</a></li>
<li><a href="http://www.katiesamsonlaxfest.com/design.html"> 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.
Comments
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.
