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>