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.