Unexpected behavior when trying to center element of dynamic width horizontally using outerWidth() and $(window).resize()

Question

Edit 1 (reduced the problem to a jsfiddle):

I removed some unnecessary detail of the original problem.

I am trying to center a popup in the window. Because of how it will be used in the original context, the popup's width will be dynamic. Its only contents will be text, but it won't be known how long that text will be. In most cases it will fit on one line, but if the text is longer and the user has a lower screen resolution, it may need to occupy 2 lines, and I would like to keep all the text on the screen. The text is static in the jsfiddle, so that is obviously not what is causing the issue. I'm just clarifying in case anyone is wondering why I haven't tried setting a width for the popup. I'm using jquery to get the width using outerWidth() and $(window).resize() to trigger the centering function when the browser window is resized.

It works fine as long as the popup's width is smaller than the element containing it. I would like for the popup to just take the full width of its container if it is made small enough that the text has to go to two lines. As you will see in the video below, if you make a large adjustment in the browser window size, the width isn't always being reported correctly, which is causing the element to have a space on the left side instead of being centered. In other words, outerWidth() is reporting a width different than what is being rendered by the browser.

See this video for a demonstration of the problem: http://youtu.be/Tnq6nrrDKvw

This is happening for me in Firefox, Chrome, IE, Opera, and Safari. Perhaps it is a problem with jquery's outerWidth function. Or perhaps I don't understand something about how it is supposed to work. Is there another method to accomplish what I'm trying to do?

Here is the javascript, nothing too complicated:

function center_horizontally(id)
{
    var windowWidth = document.documentElement.clientWidth;
    var popupWidth = $(id).outerWidth();

    var new_left = Math.max(0, windowWidth/2 - popupWidth / 2);

    ...

    $(id).css('left', new_left + 'px');
}

$(function(){
    $(window).resize(function() {
        center_horizontally('#popup');
    });

    center_horizontally('#popup');
});

The only important css is that the popup has position: fixed and no set width or height. If I set the width of the popup, it sticks along the left side like it should, but the text extends beyond the right boundary. I would like to keep all the text on the screen and have it take the full width and jump some text down to the next line if needed. When the width gets low enough for that to happen, I just want the notice to occupy the entire width of the viewing area.

http://jsfiddle.net/dnag/qHjVG/5/

Edit 2 (the solution):

This is the solution I ended up using thanks to the help I got.

http://jsfiddle.net/dnag/qHjVG/44/

Instead of repositioning the popups, the popups are left with an auto width and display: inline-block. They are contained inside a div with fixed positioning. When the window is resized, the containing div is resized and repositioned. You can specify how much horiziontal space you want outside of the popups when the windows is reduced by changing the number in the function. There might be a way to do this with css only, but I'm just happy to have something functional at the moment.

Answer 1

So I might be misunderstanding but you don't need JS at all for this effect. This seems like a case of beating the sh!t out of something with a JS-hammer instead of using some CSS-fu. I've included two examples in my HTML below one with just a single line of text, one with more than that (3 lines when I plugged it into the fiddle)

I don't have a damn fiddle account so here is the pertinent pieces from your fiddle:

1) no JS needed. (especially not things like outerwidth et al which can cause unnecessary reflows/repaints.

2) HTML

<div id="popup">
    This is some sample text, just a little bit of sample text.
</div>
<div id="popup" style="top:120px;">
    This is some sample text, just a little bit of sample text.
    This is some sample This is some sample text, just a little bit of sample text.
    This is some sample This is some sample text, just a little bit of sample text.
    This is some sample 
</div>

3) CSS

#popup {
  background: #FFF;
  position: fixed;
  top: 50px;
  left: 0;
  border: 1px solid #000;
  box-shadow: 0 0 3px #CCC;
  padding: 10px; 
  width:auto;
  max-width:100%;
}

--EDIT-- ALT version centered like the top of the question implies:

HTML

<div id="popupWrapper">
    <div id="popup">
        This is some sample text, just a little bit of sample text. little bit 
    </div>
    <div id="popup">
        This is some sample text, just a little bit of sample text. little bit of s little bit of s little bit of s
    </div>
    <div id="popup" style="top:120px;">
        This is some sample text, just a little bit of sample text.
         This is some sample This is some sample text, just a little bit of sample text.
         This is some sample This is some sample text, just a little bit of sample text.
         This is some sample 
    </div>
</div>

CSS

#popupWrapper {
    width: 100%;
    text-align:center;
    position:absolute;
}

#popup {
    background: #FFF;
    top: 50px;
    border: 1px solid #000;
    box-shadow: 0 0 3px #CCC;
    padding: 10px;
    max-width:100%;
    display: inline-block;
}