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

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>