Make div stick to side of other div

Question

I'm trying to make a div appear to slide out to the right of another div, using jQuery.

I've based my solution on this answer, by using position:absolute, and getting the position of the trigger element in jQuery, and positioning the popover accordingly.

You can see the result of what I have so far on this JSFiddle I have made: Result / Source.

The problem is, because the popover div uses position:absolute, if I resize the page, or a scrollbar appears / disappears - the popover becomes mis-aligned to the trigger div.

How can I make the popover div stick to the right-side of the trigger div?

Answer 1

Rather than relying on jQuery for this, you can make two elements stick together in CSS by making them inline elements, forcing them to touch, and setting the CSS of the container to white-space: nowrap.

HTML:

<div id="main">
    <p>If the draw is popped out, and you resize the page, it breaks, because it has position:absolute</p>
    <div id="clickable">
        <div id="trigger">
            <span>Click here - click away to hide</span>
        </div><div id="pop">
            <span>Now Resize Page</span>
        </div>
    </div>
</div>

Note that </div><div id="pop"> is not a typo. To force inline elements to touch, you need to remove all whitespace in your markup.

CSS:

#main {
    width:300px;
    margin:50% auto;
    margin-top:0;
    margin-bottom:0;
    background-color:#EEE;
    padding:10px;
}
#clickable { white-space: nowrap; }

#trigger {
    background-color: #FFF;
    width: 100%; 
    border: 4px solid #ddd;
    display: inline-block; }
#trigger span { margin: 5px; display: block; }

#pop {
    background-color: #333;
    color: #EEE;
    height: 38px;
    opacity: 0;
    display: none; }
#pop span { 
    margin: 10px; 
    display: block; }

JS:

$('#trigger').click(function(event) {
    event.stopPropagation();
    var width = $(this).outerWidth();
    var offset = $(this).offset();
    var top = (offset.top+4)+'px';
    var left = (offset.left+width)+'px';
    $('#pop').css({
        'top' : top,
        'left' : left,
        'display' : 'inline-block',
        'opacity' : 0,
        'width' : 0
    }).animate({
        'width' : '140px',
        'opacity' : 1
    });
});

$('html').click(function(event) {
    if (!($(event.target).closest('#pop').length)) {
        $('#pop').animate({'width':0,'opacity':0},500,
                           function() {
            $(this).hide();
        });
    }
});

Preview: http://jsfiddle.net/Wexcode/4kg2W/3/