Question

Even though my #tbr div align is set to right, sprites keep aligning to the left. Any ideas why?

Normal text, links and images work fine. (aligned to right, with 20px right margin, like it is supposed to be).

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/

Answer 1

Not sure if I am following you here completely, but I think this might be your issue

#bar a {
    height:35px;
    display:block;
    background-image:url(http://goo.gl/yLbQ9);
    float:left; //you want this to be right
}