How to increase an width:auto DIV's width by X

Question

I have a DIV (that is set to float:left) that has its width set to auto because i want it to be just as wide as its contents.

On hover, i would like to increase width of the DIV by say, 20 pixels.

When setting a fixed width in the :hover CSS class, the container will get that width on hover, but

1. CSS3-Transitions won't apply/work (tested in Firefox 15.0.1)
2. If my DIV's contents are larger than that fixed width, the final width will not be correct.

How - without the usage of javascript - can i keep the content of the DIV adjusted to its content, and have it increase that width by a certain amount of pixels on hover?

See my JSFiddle here.

Answer 1

Set the default padding to 0 and the hover padding to 10px on each side like shown here.

Working demo: http://jsfiddle.net/jfriend00/YWvTu/

.myDiv {
    float: left;
    width: auto;
    padding: 0;
    background-color: #eeeeee;
    border: 1px solid #aaaaaa;
    -moz-transition: all 0.25s ease-out;
    -webkit-transition: all 0.25s ease-out;
    -i-transition: all 0.25s ease-out;
    transition: all 0.25s ease-out;
}
.myDiv.alternative {
    width: 100px;
}
.myDiv:hover {
    padding: 0 10px;
}

Answer 2

I saw your fiddle, though I'm not sure this is the exact effect you need, try this:

.myDiv:hover {
    padding-right: 20px; 
}