Strategy for creating a Radio Button Box: - html

Question

Here is some code I modified from this nifty site:
http://jsfiddle.net/Ajhka/
I have all the elements styled with a checkbox images,..fonts, colors etc.
I just don't know how to do the layout. I don't have a strategy. But what I want is only slightly different from the fiddle.
I want the Title and Content Text aligned like they are but I went them placed to the right of the check boxes, where the title is at the same height as the check box. This would make most sense and be the most readable.
How would I go about doing this?

Answer 1

Here's my version: http://jsfiddle.net/Ajhka/5/
I didn't change your CSS at all - just the HTML.
<form id="privacy">
<div>
<input type="radio" id="radio1" name="rdo">
<label for="radio1"></label>
<span class="privacy_title">Normal</span>
<span class="privacy_content">When you add a bookmarks it is posted to the feed. You have a public page which can be viewed by non-members.</span>
</div>
<div>
<input type="radio" id="radio2" name="rdo">
<label for="radio2"></label>
<span class="privacy_title">Private</span>
<span class="privacy_content">The bookmarks you add are not posted to the feed. You do not have a public page.</span>
</div>
<div>
<input type="radio" id="radio3" name="rdo">
<label for="radio3"></label>
<span class="privacy_title">Secret</span>
<span class="privacy_content">Same as private and all of your data is encrypted using NSA approved algorithms.</span>
</div>
</form>
To get this layout I swapped your <p> tags for <span>. Then I wrapped each set of radio/title/text in a <div>. You could tweak spacing a bit with CSS if you so chose.

Answer 2

I've updated your fiddle with a working example
http://jsfiddle.net/Ajhka/2/
Looks like this is what you're looking for. The 1st row is with the header next to the checkbox and the description below it.
The other two are with all the text next to the checkbox.
If you want have all the others as example row 1. move the <div style="clear: both"></div> 1 row up.
If you want the description text to be aligned with the header text. use margin-left on your <p> element to align it or put it all in a <table>.