Variable width depending on position?

Question

If I assign position:absolute to an element, its width will not be variable depending on the text inside.

On the other hand, if I assign position:relative to that element, the width will vary depending on the text inside.

Here I have the fiddle with two menus, each one with a different position property: http://jsfiddle.net/je3PX/4/

What is the cause of this? Why width depends on the position attribute? Im looking to make it vary depending on the text size.

Thanks.

Answer 1

The default value for width is auto, meaning it will adapt itself to the layout as required. For block level elements (display:block et al) this means adapting to the parent container, for inline elements (display:inline et al) this means adapting to the content.

The position attribute factors in this in that the value relative does not take the element out of the regular flow layout, and as such the base rules are still maintained. The value absolute does take it out of the regular flow layout, as such there is no longer a parent to base the width on, as such falling back to fit-to-content.

The relevant rules are defined in chapter 10 of the W3 CSS2 specification (too long to quote).