Adding radio buttons to Cameron Adam's example in his fancy form article

HTML & CSS
1

The relevant part of the article is found here: http://www.sitepoint.com/fancy-form-design-css-3/

I followed it for the most part but added a few things. He advocates styling the label tag to left align labels. I did this, but w hen I tried to add radio buttons, the form became very ugly. His example forms do not have any radio buttons. I tried some things but could not get radio buttons to both line up, and have their labels beside them, using the method in the article. I also am in need of a way to stick an overall label for the group of radio buttons in somewhere without creating a new line. (The radio buttons and their overall label should be on the same line.) I’m going for labels that are to the left of their relevant form input, but right-aligned, so as to be close to the input.

Here is the html. I included a text field, a set of radio buttons, and a text area. It’s important to me that the text area’s label be aligned with the top of the textarea itself, which floating the labels left does. Some things that I tried fixed my problem but broke this part of my styling. (The text area is as it should be in my default example below.)

The <li> and <ol> are just being used for additional styling. You can make use of them if you want, or add a div instead or whatever works.



<form id="tform" method="" action="">
		<ol>
			<li>
				<label for="name">Your name:</label> 
				<input type="text" name="name" id="name">
				
			</li>
			<li>
				<label for="option1">Option1</label>
				<input type="radio" name="radiobutton" id="option1" value="1">
				<label for="option2">Option2</label>
				<input type="radio" name="radiobutton" id="option2" value="2">
				<label for="option3">Option3</label>
				<input type="radio" name="radiobutton" id="option3" value="3">
			</li>
			<li>
				<label for="textarea">Text area:</label>
				<textarea name="textarea" id="textarea" cols="16" rows="3"></textarea>
			</li>
		</ol>
</form>

Here is the CSS:


label {
	float: left;
	text-align: right;
}

Any help here would be appreciated. (I am thinking that maybe styling the layout of a form with labels might not be the best route if you are using radio buttons and other items besides text fields.)