How to vertically align switch sets?

Question

I am new to html and css.

I have 3 sets of switches. Each set of buttons is displayed on one line. I would like the buttons to be aligned vertically between the sets of buttons. I am having trouble doing this with css. I would like to avoid using tables to solve this problem. I decided that I could configure the switches by setting the width of their labels, but that would not work.

My radio buttons are displayed as follows:

I want them displayed as follows:

Here is my css:

form.remit_change_form label.fixedwidth { display: block; width: 180px; float: left; } form.remit_change_form input.radiolabel { width: 35px /* doesn't make any visual change! */ } 

Here is my html:

 <div> <label for="tran_code" class="fixedwidth">Tran Code</label> <input type="radio" class="radioinput" name="tran_code" id="tran_code_22" value="22"/> <label for="tran_code_22" class="radiolabel">22</label> <input type="radio" class="radioinput" name="tran_code" id="tran_code_42" value="42"/> <label for="tran_code_42" class="radiolabel">42</label> <input type="radio" class="radioinput" name="tran_code" id="tran_code_52" value="52"/> <label for="tran_code_52" class="radiolabel">52</label> <input type="radio" class="radioinput" name="tran_code" id="tran_code_na" value="NA"/> <label for="tran_code_na" class="radiolabel">NA</label> </div> <div> <label for="cut_off_time" class="fixedwidth">Cut-off Time</label> <input type="radio" class="radioinput" name="cut_off_time" id="cut_off_time_18.00" value="18.00"/> <label for="cut_off_time_18.00" class="radiolabel">18.00</label> <input type="radio" class="radioinput" name="cut_off_time" id="cut_off_time_19.00" value="19.00"/> <label for="cut_off_time_19.00" class="radiolabel">19.00</label> <input type="radio" class="radioinput" name="cut_off_time" id="cut_off_time_na" value="NA"/> <label for="cut_off_time_na" class="radiolabel">NA</label> </div> <div> <label for="remit_notify_method" class="fixedwidth">Remit Notify Method</label> <input type="radio" class="radioinput" name="remit_notify_method" id="remit_notify_method_n" value="N"/> <label for="remit_notify_method_n" class="radiolabel">N</label> <input type="radio" class="radioinput" name="remit_notify_method" id="remit_notify_method_f" value="F"/> <label for="remit_notify_method_f" class="radiolabel">F</label> <input type="radio" class="radioinput" name="remit_notify_method" id="remit_notify_method_e" value="E"/> <label for="remit_notify_method_e" class="radiolabel">E</label> </div> 

Answer 1

You do not need to use classes unless otherwise ( edit : they were necessary, so the answer has been updated).

 form.remit_change_form label.radiolabel { display:inline-block; /* added this */ width: 50px; } form.remit_change_form label.fixedwidth { width: 180px; } 

Answer 2

Why not give yourself some HTML elements to work with? If you are against using tables, what about using an unordered list?

http://jsfiddle.net/YYjsT/

Answer 3

Pasting it into a table works great

http://jsfiddle.net/3QJg8/