Animate an element's width from 0 to 100%, with it and it's wrapper being only as wide as they need to be, without a pre-set width, in CSS3 or jQuery

Question

http://jsfiddle.net/nicktheandroid/tVHYg/

When hovering .wrapper, it\'s child element .contents should animate from 0px to it\

Answer 1

I think I've got it.

.wrapper {
    background:#DDD;
    display:inline-block;
    padding: 10px;
    height: 20px;
    width:auto;
}

.label {
    display: inline-block;
    width: 1em;
}

.contents, .contents .inner {
    display:inline-block;
}

.contents {
    white-space:nowrap;
    margin-left: -1em;
    padding-left: 1em;
}

.contents .inner {
    background:#c3c;
    width:0%;
    overflow:hidden;
    -webkit-transition: width 1s ease-in-out;
    -moz-transition: width 1s ease-in-out;
    -o-transition: width 1s ease-in-out;
    transition: width 1s ease-in-out;
}



.wrapper:hover .contents .inner {
   
    width:100%;
}

    +

        

            These are the contents of this div
        
    

Animating to 100% causes it to wrap because the box is bigger than the available width (100% minus the + and the whitespace following it).

Instead, you can animate an inner element, whose 100% is the total width of .contents.