CODEWITHSUNDEEP
htmlcss
John
John

Reputation: 1629

Sprite right align

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/

Upvotes: 1

Views: 1228

Answers (4)

Rab
Rab

Reputation: 35572

See this

Is this What you wanted?

Upvotes: 1

Shailender Arora
Shailender Arora

Reputation: 7778

Just give float:right to you #bar a like this:- 

#bar a {

    height:35px;
    display:block;
    background-image:url(http://goo.gl/yLbQ9);
    float:right;
}

i hope this will help you.... see the demo:- http://jsfiddle.net/B4n9T/5/

Upvotes: 1

evancohen
evancohen

Reputation: 677

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
}

Upvotes: 2

Matthew Evans
Matthew Evans

Reputation: 245

http://jsfiddle.net/B4n9T/3/

Here's how it's fixed:

position:relative; on #tbr and to stop it being incorrectly positioned again i've set the width:auto; on it too.

Upvotes: 1

Related Questions