CSS: Why won't this box get wider?

Question

I just need a sanity check here... DEMO

Basically, I can't figure out how to get the box under the link to get wider as more content is added. It seems fixed to the width of the parent div (or the width of, say, the longest element like the select or a really long word with no spaces), despite being absolutely positioned. I use this trick all the time with ul and li but it doesn't make sense to use that in my situation, and for some crazy reason it just won't work with a div inside a div.

I don't want to set a width (which, of course, works) because I don't always know what will be in this box. GRR

Thanks :\

EDIT

It appears that removing the position:relative from the parent element does, in fact, allow the box to get wider. However, relative positioning is necessary because I need the child div to be absolutely positioned under the parent div, and the parent div's location is technically dynamic (so no figuring out absolute page coords).

Answer 1

Have you try the pre tag

<pre>text goes here</pre>

this will cause to break the line only wherever you insert a <br />

Answer 2

div#parent has position: relative;. Try removing that declaration. In my environment, that causes the div to expand as needed.

Answer 3

I am in Google Chrome 6.0.422.0 dev and as I add content (text) the grey box expands horizontally and vertically as necessary. What browser are you using?

Answer 4

If I understand correctly...

Floating containers (i.e., #parent) will fit to their contents with the default of width: auto. The contents will line-break where possible to prevent the width from ever increasing.

To counter this, you should just need to employ white-space: nowrap.

Either for the contents as a whole:

.advanced {
    /* ... */
    white-space: nowrap;
}

Or, define a new class to allow for more flexible usage:

.line {
    white-space: nowrap;
}

Then, (e.g.) wrap each label/select as:

<div class="line">
    <label>Show:</label>
    <select name="showAll">
        <option value="true">My Team</option>
        <option value="false">Mine Only</option>
    </select>
</div>