Stacked Radio Buttons

What is the best way to style things so that radio buttons are stacked on top of each other?

Here is my code…


	<label for="gender">Gender:</label>
	<input type="radio" name="gender" value="1" checked="checked" /> Male
	<input type="radio" name="gender" value="2" /> Female

Visually, I want something like this…


Gender:
_X_	Male
___	Female

Sincerely,

Debbie

A better way to mark this up would be like so:

<fieldset>
    <legend>Gender:</legend>

	<div>
		<input type="radio" name="gender" id="male" value="1">
		<label for="male">Male</label>
	</div>

	<div>
		<input type="radio" name="gender" id="female" value="2">
		<label for="female">Female</label>
	</div>

</fieldset>

That’s where a fieldset/legend comes in handy, as you should really keep the labels for the radio buttons. (The legend will announce to screen readers what the radio buttons are for (i.e. choosing a gender) and then the labels clearly indicate which choice is which.)

A full page example, with minimal CSS, would be like so:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>

fieldset {border: 0; padding: 0;}

</style>
</head>
<body>

<fieldset>
    <legend>Gender:</legend>

	<div>
		<input type="radio" name="gender" id="male" value="1">
		<label for="male">Male</label>
	</div>

	<div>
		<input type="radio" name="gender" id="female" value="2">
		<label for="female">Female</label>
	</div>

</fieldset>

</body>
</html>