prevent centered text from moving when sibling is hidden/displayed

Question

We have a div that serves as a horizontal titlebar that has a title in the middle. It also has a left justified link called "settings" that appears only when the mouse is over the titlebar. The problem is when the settings link is displayed, the title moves.

An example /w jQuery follows - how can we keep the title of clocks stationary regardless of whether settings is displayed?

<script type="text/javascript">
    $(function() {
        var settings = $(".settings");
        $(".titlebar")
           .mouseover(function(){
               settings.css("display", "inline");
           })
           .mouseout(function(){
               settings.css("display", "none");
           });
    });
</script>
<style type="text/css">
    .titlebar {text-align: center; width: 300px;}
    .icon {float: left;}
    .settings {float: left; display: none;}
    .title {margin-right: 10px;}
</style>

...

<div class="titlebar">
    <img class="icon" src="icon.png"></img>
    <a class="settings">settings</a>
    <a class="title">clocks</a>
</div>

Answer 1

Try using absolute positioning like this:

<style type="text/css">
    .titlebar {
         text-align: center; 
         width: 300px;
         position: relative;
    }
    .icon {float: left;}
    .settings {
         display: none;
         position: absolute;
         left: 0;
    }
    .title {margin-right: 10px;}
</style>

Answer 2

Absolute positioning:

<style type="text/css">
    .titlebar { position:relative; text-align: center; width: 300px; }
    .icon { float: left; }
    .settings { position: absolute; left: 20px; display: none; }
    .title { margin-right: 10px; }
</style>

You have to play with the absolute positioning to get it not to overlap the png. I.e. change the left: 20px to the width of the png plus some amount of padding;