Why are the sprites in my #tbr div aligning to the left even though its align is set to right? Any suggestions?
Regular text, links, and images seem to be working correctly (aligned to the right with a 20px right margin as intended).
HTML:
<div id="topbar">
<div id="tbl>abc</div>
<div id="tbc">center</div>
<div id="tbr">
<div id="bar">
<a href="#" id="sound"></a>
</div>
</div>
</div>
CSS:
#topbar {
width:100%;
height:36px;
padding-top:12px;
background-color:#e7e6e6;
border-top:1px solid #d0cdcd;
border-bottom:1px solid #d0cdcd;
}
#tbl {float:left;width:30%;text-align:left;padding-left:20px;}
#tbc {display:inline-block;text-align:center;width:30%;}
#tbr {float:right;width:30%;text-align:right;padding-right:20px;}
#bar {margin-top:-5px;}
#bar a {
height:35px;
display:block;
background-image:url(http://goo.gl/yLbQ9);
float:left;
}
#sound {width:35px;background-position:0 0;}
JSFIDDLE: http://jsfiddle.net/B4n9T/