How to position an element 2px to the left of another, centered, element.

Question

I want to position a button 2px to the left of a title span on my master page. The span can vary in size, and is centered in its containing div. How can I do this?

EDIT: Here is the code:

            <asp:CheckBox ID="FavCheckBox" runat=server style="display:inline-block"
                    oncheckedchanged="FavCheckBox_CheckedChanged" AutoPostBack="True"/>
            <cc1:ToggleButtonExtender
                    ID="ToggleButtonExtender2" runat="server" TargetControlID=FavCheckBox 
                    ImageHeight=16 ImageWidth=16 CheckedImageAlternateText="Remove from Favorites" 
                    CheckedImageOverAlternateText="Remove from Favorites" 
                    CheckedImageOverUrl="~/Images/favorite_hollow.gif" 
                    CheckedImageUrl="~/Images/favorite.gif" 
                    UncheckedImageAlternateText="Add to Favorites" 
                    UncheckedImageOverAlternateText="Add to Favorites" 
                    UncheckedImageOverUrl="~/Images/favorite.gif" 
                    UncheckedImageUrl="~/Images/favorite_hollow.gif">
            </cc1:ToggleButtonExtender>
    &nbsp;&nbsp;
        <span id="Span1" runat="server"  class="TitleLabel"><%= SiteMap.CurrentNode.Title %></span>

EXPLANATION: The checkbox with togglebutton is to mark the page I am on as a favorite. I want this checkbox to be positioned 2px to the left of the TitleLabel span.

Answer 1

Put the button in the parent div before the span and give it margin-right: 2px.

Answer 2

Have you considered asking this on doctype.com (a sister website dedicated to design questions)? You might get better answers there.

Answer 3

You can give the checkbox a margin-right: 2px; or a position: relative; left: -2px;

What ever one works for you.