CSS: how to make label appear right of the radio?

Question

Say I have the following mark up:

<label for="name">Name:</label>
<input type="radio" name="name" id="name"/>

The order of the tags appear to be proper to me (in a semantic sense: label before the thing you're labeling). But I want to display this as radio button first, followed by the label. How can I do that in CSS?

Answer 1

You don't need CSS. Wrap your input in a label and put the text last.

<label><input type="radio" name="name" id="name"/>Name:</label>

Is that still semantic for you?

Or you could try the float.

Answer 2

Tag order in this case doesn't matter. And even if it did, then it would be the other way around - first you would have to create the radio button, and then reference it in the label.

To answer your question: just do it in the order you want to display it

<input type="radio" name="name" id="name"/>
<label for="name">Name:</label>

fiddle http://jsfiddle.net/Jm2JR/1/..