I'm having difficulty getting the radio buttons to align vertically
with one another and the header (1 2 3 4 5) at the top. Ideally each
radio button will be directly below the one above it and the number 1
will be atop the first radio button starting at the left. Any
thoughts on how to achieve this?
<html>
<head>
<title></title>
<style type="text/css">
label {display:block; float:left; width: 130px; padding: 0;
margin: 5px 0 0; text-align: right;}
#categories {border:1px solid #000; text-align:center; font-
weight:bold;
letter-spacing:0.55em; }
#rank-input {text-align:center; border:1px solid #000; padding-left:
1em;
width:100%; height:3.0em; vertical-align:middle;}
</style>
</head>
<body>
<div id="categories">1 2 3 4 5</div>
<label for="test">Test1:</label>
<div id="rank-input">Bad
<img src="images/frown.gif" title="bad" />
<input type="radio" value="1" name="1" />
<input type="radio" value="2" name="1" />
<input type="radio" value="3" name="1" />
<input type="radio" value="4" name="1" />
<input type="radio" value="5" name="1" />
<img src="images/smile.gif" title="good" /> Good
</div>
<label for="test">Test2:</label>
<div id="rank-input">Worse
<img src="images/frown.gif" title="bad" />
<input type="radio" value="1" name="2" />
<input type="radio" value="2" name="2" />
<input type="radio" value="3" name="2" />
<input type="radio" value="4" name="2" />
<input type="radio" value="5" name="2" />
<img src="images/smile.gif" title="good" /> Better
</div>
<label for="test">Test3:</label>
<div id="rank-input">Terrible
<img src="images/frown.gif" title="bad" />
<input type="radio" value="1" name="3" />
<input type="radio" value="2" name="3" />
<input type="radio" value="3" name="3" />
<input type="radio" value="4" name="3" />
<input type="radio" value="5" name="3" />
<img src="images/smile.gif" title="good" /> Great
</div>
</body>
</html>
vertically aligning radio buttons with a header 
