Keep radio buttons with their labels on line breaks

Question

I have an HTML form with sections laid out like this:

I do want the labels to be inline so that this section won't be 7 line breaks tall, but I would like to know how I can make sure the radio buttons stay with their labels.

Note: the labels are of varying lengths and are populated dynamically with data from the server, so I can't set a fixed width div without causing some weird spacing issues.

If there is an idiomatic way of doing this, please show me.

Answer 1

Put each input/label pair in a span, then set white-space: nowrap on the span. Something like this:

<div class="radios">
    <span>
        <input type="radio" id="productTypeRC" />
        <label for="productTypeRC">RC</label>
    </span>
    ...
</div>

CSS:

.radios > span
{
    white-space: nowrap;
}

Edit: The above technique suffers from a bug in Chrome where the pairs don't wrap and instead are hidden. This bug is demonstrated in the question Text doesn't wrap properly between elements having white-space: nowrap. Solutions include using float: left with some margin added to make up for collapsed spacing, or to muck with the HTML until it works. If you just put the <input> and <label> as the same line as the <span>, it works.

<div class="radios">
    <span><input type="radio" id="productTypeRC" /> <label for="productTypeRC">RC</label></span>
    <span><input type="radio" id="productTypeTC" /> <label for="productTypeTC">TC</label></span>
    <span><input type="radio" id="productTypeNS" /> <label for="productTypeNS">NS</label></span>
    ...
</div>

jsfiddle.net/Z5uaT/57

Answer 2

Put the checkbox inside the label (yes, this is valid) and make the label inline-block (see this JSfiddle for a demo). IMO, this is a more elegant and semantic solution than the span wrapping suggested by gilly3, which is why I decided to post even though you've already accepted an answer.