Question

I realize this question is rather specific… I’m trying to get my head clearly around the affects of “width” on the css box model.

I have a label to the left of two radio buttons. The label floats left, and the radio buttons appear to the right of the label. The radio buttons themselves have labels to the right of them, and these labels can be long.

The radios are in a UL block.

When I have width:auto; on the UL block, and then shrink the browser to be rather narrow, the radio buttons and their respective labels drop down to the next line.

If I remove the width:auto, the radio buttons remain floated and the label strings beside the radios continue to shrink, which is what I want.

My question is: Why would width:auto cause the radios and their labels to drop down a line? is it because width:auto attempts to create a box which accomodates the full length of the label strings without flowing the text? Or is something else at work?

Here’s sample code which demonstrates the behavior:

<style>
    .inlineLabels ul{
        float:left;
        width: 66%;
        padding: 0;
    }

    p.label{
        float:left;
        text-align:right;
        position:relative;
        width:32%;
        margin: .3em 2% 0 0;
        display:block;
    }

    ul.blockLabels{
        /*width:auto; why does uncommenting this cause the radios to drop down to a new line when shrinking browser size? */ 
        list-style:none;
    }
</style>
<fieldset class="inlineLabels">
    <div>
        <p class="label">Choose:</p>
        <ul class="blockLabels">
            <li>
                <label for="a-1">
                    <input name="a" id="a-1" value="0" type="radio">&nbsp;<span class="">A short string</span>
                </label>
            </li>
            <li>
                <label for="a-2">
                    <input name="a" id="a-2" value="1" type="radio">&nbsp;<span class="">A very very very  very very very very very very  very very very string</span>
                </label>
            </li>
        </ul>
    </div>
</fieldset>

Answer 1

TLDR: the "preferred width" of floated elements with width auto is the width of the content without line breaks. That’s why the engine will first wrap the float and only as a last measure it will start wrapping text within the float.

You can read the answer in the spec: http://www.w3.org/TR/CSS2/visudet.html#float-width

If ‘width’ is computed as ‘auto’, the used value is the "shrink-to-fit" width.

Calculation of the shrink-to-fit width is similar to calculating the width of a table cell using the automatic table layout algorithm. Roughly: calculate the preferred width by formatting the content without breaking lines other than where explicit line breaks occur, and also calculate the preferred minimum width, e.g., by trying all possible line breaks. CSS 2.1 does not define the exact algorithm. Thirdly, find the available width: in this case, this is the width of the containing block minus the used values of ‘margin-left’, ‘border-left-width’, ‘padding-left’, ‘padding-right’, ‘border-right-width’, ‘margin-right’, and the widths of any relevant scroll bars.

Then the shrink-to-fit width is: min(max(preferred minimum width, available width), preferred width).