CSS for input

Someone please help me to align those radio buttons to the right and also some vertical space for the text.

u: protectyourdesigndev
p: z%#N>4ar6qR7

Thank you Stomme poes

  1. they are already aligned to the right???

  2. Use labels. Every form should have them.

One thing you can do is wrap labels around inputs. Some people don’t like to do this but it is perfectly legal:


<div class="form_row"><div class="radio">
[b]<label for="typeind">[/b]<span>Individual:</span> £3.00 + VAT per upload or  £150 + VAT for unlimited uploads <input type="radio" name="typeid" [b]id="typeind"[/b] value="3" checked="checked" />[b]</label>[/b]

[b]<label for="typebus">[/b]<span>Business:</span> £3.00 + VAT per upload or  £1,500 for unlimited uploads <input type="radio" name="typeid" [b]id="typebus"[/b] value="4" />[b]</label>[/b]
</div>
</div>

You can’t repeat id’s like you did, so I changed them. The label’s for attribute links it with the input explicitly (the input being inside also links it implicitly but personally I always link with for attributes anyway) by matching the unique id of the input.
The span is one option to force a newline after individual. Whether you use a span or a br tag depends on whether you believe the newline is necessary in the content or not. Looking at it, my opinion is it means the same thing even if Individual: some text is like so in the content, so I chose a span. But no biggie either way.

If you don’t like the idea of wrapping labels:


<div class="form_row"><div class="radio">
<label for="typeind"><span>Individual:</span> £3.00 + VAT per upload or  £150 + VAT for unlimited uploads</label> <input type="radio" name="typeid" id="typeind" value="3" checked="checked" />

<label for="typebus"><span>Business:</span> £3.00 + VAT per upload or  £1,500 for unlimited uploads</label> <input type="radio" name="typeid" id="typebus" value="4" />
</div>
</div>

I think this way might be a bit harder to style. Posisbly floating the labels left and the inputs right will get what you want, but you said you wanted the radio’s to the right and they look to be to the right to me…

If they don’t seem to the right, please state which browser… I only looked in Firefox on Ubuntu Linux. I can take a screen shot if you’d like.

Anyway, once you have your label text in a label, you can do stuff like give the top one (or both) a bottom margin to give more vertical space between questions. You could also use a br tag, but using two of them means it belongs in the CSS.

You can also wrap some other block around each label-input pair:
<div>
<label for=“”>Text</label>
<input type=“radio” name=“” id=“” />
</div>

Some people use p’s for this… whatever. Div is a little less meaningless which is attractive. When I do the label-wrapping-the-input thing, it’s partially to avoid wrapping blocks around each label-input pair. I set the labels themselves as blocks, usually wrap all the label text in a span and float that left, then let the inputs just do their thing. The float then has clear: left and maybe overflow: hidden for float enclosement if necessary.