How can I include the width of “overflow: auto;” scrollbars in a dynamically sized absolute div?

Question

(First question on Stack Overflow. Hope I\'m doing it right.)

I\'m trying to create a floating menu that inherits its width from its content (since I don\'t know the

Answer 1

By chance I stumbled on this. Setting white-space: normal actually made Firefox push the scroll bar outside. See http://jsfiddle.net/w7Mm8/36/.

Edit: Wait... not with only five (the previous fiddle had six words): http://jsfiddle.net/w7Mm8/37/. Somehow, the extra word caused it to behave.

Edit2: Based on the bizarre observation above (the white-space: normal did not really have anything to do with it, it was the extra word), there is a bizarre "workaround" that may prove useful to some people (and a pain for others). See (five words) http://jsfiddle.net/w7Mm8/49/, (six words) http://jsfiddle.net/w7Mm8/57/. The content must be set to 3 characters and cannot be spaces (from my experiments). Note: the pseudo element has to be where the text content is, however deep that is, see: http://jsfiddle.net/w7Mm8/58/ where it does not work.

Answer 2

You have a few options.

Use white-space:nowrap; and some padding.

Use overflow: scroll;, which adds an extra scrollbar on the bottom, but fixes the wrapping problem in Firefox.

Use overflow-y:scroll which is CSS3 and is supported by only modern browsers.