Question

I am trying very hard to make this work but I can’t see what is wrong. I have the following code:

<div id="ftr_btm">
        <div id="ftr_ctr">
            <div id="ftr_msg">
                <ul>
                    <li><a href="/">123</a></li>
                    <li><a href="/"></a></li>
                </ul>
            </div>
        </div>
        <div id="ftr_rgt">
            <div id="ftr_msg">
                <ul>
                    <li><a href="/">ABC</a></li>
                    <li><a href="/"></a></li>
                </ul>
            </div>
        </div>
    </div>

and the following CSS:

#ftr_btm { height:24px; margin:0 auto; border-top: 1px solid #AAA;
    background: #F6F6F6;
    background: -moz-linear-gradient(top, #F6F6F6 0%, #F6F6F6 5%, #F0F0F0 6%, #F0F0F0 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#F6F6F6), color-stop(5%,#F6F6F6), color-stop(6%,#F0F0F0), color-stop(100%,#F0F0F0)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #F6F6F6 0%,#F6F6F6 5%,#F0F0F0 6%,#F0F0F0 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #F6F6F6 0%,#F6F6F6 5%,#F0F0F0 6%,#F0F0F0 100%); /* Opera11.10+ */
    background: -ms-linear-gradient(top, #F6F6F6 0%,#F6F6F6 5%,#F0F0F0 6%,#F0F0F0 100%); /* IE10+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#F6F6F6', endColorstr='#F0F0F0',GradientType=0 ); /* IE6-9 */
    background: linear-gradient(top, #F6F6F6 0%,#F6F6F6 5%,#F0F0F0 6%,#F0F0F0 100%); /* W3C */ }
#ftr_btm p { line-height:20px; text-align:center; margin:0px; padding:0px; color:#666; }

/* Footer Message */
#ftr_ctr {text-align: center; font-size:0.8em; }
#ftr_rgt {text-align: right; font-size:0.8em; top: 0px; position: relative;}
#ftr_msg { color:#666;  display: inline-block; padding-top: 2px; height:24px; background: transparent;}
#ftr_msg ul { margin: 0; }
#ftr_msg ul li { float: left; overflow: inherit;position:relative; white-space: nobox; display:inline; line-height: 20px; }
#ftr_msg ul li a { color:#666; display:inline; padding: 0 10px; white-space: nobox; text-decoration: none; }
#ftr_msg ul li a:hover { color:#3985d4;} 

The problem is that 123 and ABC are both supposed to appear within the footer. When I run it with this fiddle then you can see ABC is BELOW the footer. Can anyone see what I am doing wrong. I checked many times and still cannot see what’s wrong.

Answer 1

Guessing your intent from what you have so far..

• On #ftr_rgt, you need to set position to absolute, instead of relative.
• On the parent of #ftr_rgt (which is #ftr_btm, you need to set position: relative.
• Lastly, you need to add right: 0 to #ftr_rgt. You already have top: 0.

See: http://jsfiddle.net/a4Gar/1/

If you’re trying to use relative/absolute positioning, you need to get your head around how it works:

http://css-tricks.com/791-absolute-positioning-inside-relative-positioning/

Lastly, I think that you could accomplish this layout in a simpler way with floats.