I've you haven't guessed by reading my other posts, I'm a huge fan of extremely minimal markup. It's just plain easier to update. I have no statistics on this, but I'd have to imagine that for most sites, content is updated far more than style.

But, I'm finally stumped. I know there has to be a clever way to make this look good with CSS alone:

<label for="check1">Check 1</label>
<input type="radio" id="check1" />
<label for="check2">Check 2</label>
<input type="radio" id="check2" />
<label for="check3">Check 3</label>
<input type="radio" id="check3" />

Below is the best I've been able to achieve. It looks decent in all browsers, except pre-IE 8.

label + input[type="radio"] { float: left; clear: right; margin-right: 8px; }
label + input[type="radio"] + label { display: block; margin-top: 1em; padding-left: 26px; }
label + input[type="radio"] + label + input[type="radio"] { margin-top: -1em; }

If any of our readers know of a better solution, please drop a comment. I'd be interested to get a thread going on this.

1 Comment

Leave a Reply

Your email address will not be published. Required fields are marked *