Q:

Right align child div without expanding a parent with dynamic width

I've been having trouble finding this one. 
I have a div that is centered in the body margin: 0 auto;. 
It contains multiple divs.  I want it to expand to the width of it's widest child width: auto;
The problem is I want to have one of the child div's aligned on the right, however this expands my parent to 100%.  How would I accomplish this without a fixed width for the parent? 

A:

You could do what you are after by setting the wrapper div to inline-block, and setting text-align: center on its parent (instead of using margin: 0 auto;).  Here is an example: http://jsfiddle.net/joshnh/6Ake5/
Here is the HTML:
<div class="wrapper">
    <div class="foo"></div>
    <div></div>
    <div></div>
</div>

And the CSS:
body {
    text-align: center;
}
div {
    border: 1px solid red; /* To see what is going on */
}
.wrapper {
    display: inline-block;
    text-align: left; /* Resetting the text alignment */
    vertical-align: top; /* Making sure inline-block element align to the top */
    /* Inline-block fix for IE7 and below */
    zoom: 1;
    *display: inline;
}
.wrapper div {
    float: left;
    height: 200px; /* To see what is going on */
    margin: 10px; /* To see what is going on */
    width: 200px; /* To see what is going on */
}
.foo {
    border-color: blue; /* To see what is going on */
    float: right;
}​

