I have a propbably easy question but one I can't seem to get to work right...
I have a web site with a footer at the bottom of the page... In the footer on the left there is your typical Copyright line. What I would like to do is add another Copyright line directly across from it on the same line just floated to the right side. How do I accomplish this? I'm always getting bumped down to the next line.
Here is the link to the unfinished test site... It a pretty elementary site but well whatever... Your help is much appreciated!
This is how it's done using list items.
Place each item in a list instead of a paragraph, display inline and remove the discs - then float the second item, as you said, to the right using an id.
Hope it helps
<ul><li>Copyright 2012 Clean-A-Tank, Inc. All rights reserved.</li>
<li id="footerMessageRight">Copyright message</li>
<!-- end .footer --></div>
Charles... Thank you! You approach certainly worked. However, there was one final catch I found. I had a background (repeating-x) bottom border. When you use this method it creates two separate background borders. I simply, removed the border to fix this problem and your method worked flawlessly. But I'm curious about the best approach to get that little "repeating-x" background border underneath the copyright text?
I'm still toying with it but if you have a solution you could offer a less experienced person like myself I'd be grateful.
Thanks for your help!
Another method is to use two divs in the footer like this:
<p>© Left side: Copyright 2012 Clean-A-Tank, Inc. All rights reserved.</p>
<p>© Right side: Copyright 2012 Clean-A-Tank, Inc. All rights reserved.</p>
<!-- end .footer --></div>
And the related css like this:
You just need to change 40% to 50% and you are done!
To be honest I'm really not sure why it wouldn't work. As long as the BG is set on the footer, then a list shouldn't make a difference - I don't think any way.
Maybe the above solution will work better.
Well... When I first attempted it I went with the 2nd method... Using two <div> for right and left. But neither seemed to work correctly, especially with the bg image. I was able to get Charles's method to work if I removed the bg image and just left it as a solid "blue" color. But the other method, while more logical to me, didn't work quite right. My own code may be part of the problem. I'm not sure. Seems like such an easy thing to do...
If you want to use the second method then you you need repeat-x and repeat-y for your background image. I suggest use this css for your footer:
position: relative;/* this gives IE6 hasLayout to properly clear */
clear: both; /* this clear property forces the .container to understand where the columns end and contain them */
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
I justs tested this on a test page and it worls. Please note, normally you should be using and Id for footer (Not a class) because there is only one footer on a page with its own styles. However, don't change anything now except the css I have posted above.
Go and have a nice sleep for now.
I've just done a quick test in Dreamweaver and it works for me:
More info Right
I haven't hosted the file so you can't see, you'll have to take my word for it.
If you use that code, and it doesn't work - it must have something to do with another element messing it up somewhere. Maybe see if FireBug shows anything up.
That image is just a randomly hosted one, by the way - looks awesome imo.