Problem with DIVs not lining up correctly - css

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>123</li>
<li></li>
</ul>
</div>
</div>
<div id="ftr_rgt">
<div id="ftr_msg">
<ul>
<li>ABC</li>
<li></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.

Answer 2

Here's your problem - block-level elements like divs will not appear next to each other unless you change the way they're displayed. Currently, #ftr_ctr is taking up the entire footer, and #ftr_rgt is appearing below it.
There are a couple ways to move #ftr_rgt up. Since it has position:relative;, you can give it a top:-20px; to slide it up. The downside it that it'll still reserve white space for itself below the footer.
You can make both #ftr_ctr and #ftr_rgt float:left;, and put a <div style="clear:both;"></div> after them. You'll need to adjust the widths of each of them to get them to line up right, though.
You can set both of them to have display:inline-block;
You may even be able to get away with just using display:inline as well.

Answer 3

#ftr_rgt {
text-align: right;
font-size:0.8em;
position: absolute;
top: 0px;
right: 0px
}

Answer 4

<div id="ftr_btm">
<div id="ftr_ctr">
<div id="ftr_msg">
<ul>
</ul>
</div>
</div>
<div id="ftr_rgt">
<div id="ftr_msg">
<ul>
<li>123</li>
<li></li>
<li>ABC</li>
<li></li>
</ul>
</div>
</div>
</div>
This might be what you are looking for, but I do not know exactly how you want the text formatted.