How can I align the elements in a table cell (<td>)? - html

Question

In trying to get the label and select element to align to the right of the row,
I tried this:
<tr>
<td>
<input type="radio" id="ucemployee" name="travelertype"/>UC Employee
<label for="selectcampus">UC Campus:</label>
<select id="selectcampus" title="Please select a campus" align="right">
<option value="pleaseselect">Please Select</option>
<option value="ucsc">UC Santa Cruz</option>
<option value="ucb">UC Berkeley</option>
<option value="ucd">UC Davis</option>
<option value="uci">UC Irvine</option>
<option value="ucla">UC Los Angeles</option>
<option value="ucm">UC Merced</option>
<option value="ucr">UC Riverside</option>
<option value="ucsd">UC San Diego</option>
<option value="ucsf">UC San Francisco</option>
<option value="ucsb">UC Santa Barbara</option>
</select>
</td>
<tr>
...but it doesn't work.
If I do this:
<td align="right">
<input type="radio" id="ucemployee" name="travelertype"/>UC Employee
. . .
<select id="selectcampus" title="Please select a campus">
. . .
...all of the elements align right, including the input radio element (as is to be expected, really), but I want the "radio" to remain aligned to the left.
How can I right align the label and select, while leaving the radio alone?
Do I need to put a "shiv" between the radio and the select, or...???

Answer 1

Here are two simple CSS methods to align-right only selected items in a td.
CSS Flexbox method.
#flex-container {
display: flex;
}
label {
margin-left: auto;
}
/* nonessential decorative styles */
table { width: 100%; }
td { border: 1px dashed black; background-color: aqua; padding: 5px; }
label { margin-right: 5px; }
<table>
<tr>
<td>
<div id="flex-container"><!-- new wrapper -->
<input type="radio" id="ucemployee" name="travelertype" />UC Employee
<label for="selectcampus">UC Campus:</label>
<select id="selectcampus" title="Please select a campus" align="right">
<option value="pleaseselect">Please Select</option>
<option value="ucsc">UC Santa Cruz</option>
<option value="ucb">UC Berkeley</option>
<option value="ucd">UC Davis</option>
<option value="uci">UC Irvine</option>
<option value="ucla">UC Los Angeles</option>
<option value="ucm">UC Merced</option>
<option value="ucr">UC Riverside</option>
<option value="ucsd">UC San Diego</option>
<option value="ucsf">UC San Francisco</option>
<option value="ucsb">UC Santa Barbara</option>
</select>
</div>
</td>
<tr>
</table>
DEMO
Notes:
The content is wrapped in a div so the display value of the td doesn't need to be changed, which could affect the table layout algorithm.
Learn more about flex auto margins here: In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?
CSS inline-block method
#right-align {
display: inline-block;
text-align: right;
width: 95%;
}
/* non-essential decorative styles */
table { width: 100%; }
td { border: 1px dashed black; background-color: aqua; padding: 5px; }
<table>
<tr>
<td>
<input type="radio" id="ucemployee" name="travelertype" />
<div id="right-align">
<label for="selectcampus">UC Campus:</label>
<select id="selectcampus" title="Please select a campus" align="right">
<option value="pleaseselect">Please Select</option>
<option value="ucsc">UC Santa Cruz</option>
<option value="ucb">UC Berkeley</option>
<option value="ucd">UC Davis</option>
<option value="uci">UC Irvine</option>
<option value="ucla">UC Los Angeles</option>
<option value="ucm">UC Merced</option>
<option value="ucr">UC Riverside</option>
<option value="ucsd">UC San Diego</option>
<option value="ucsf">UC San Francisco</option>
<option value="ucsb">UC Santa Barbara</option>
</select>
</div>
</td>
</tr>
</table>
DEMO

Answer 2

Don't understand the actual arrangements you are trying to say but i hope this will help.play with the css and labels to rearrange.
<style>
td{
float:right;
}
select,label[for=selectcampus],label[for=ucemployee]{
float:right;
text-align:left;
}
input[type="radio"]
{
float:left;
}
</style>
<td>
<label for="ucemployee">UC Employee</label>
<input type="radio" id="ucemployee" name="travelertype"/>
<select id="selectcampus" title="Please select a campus" align="right">
<option value="pleaseselect">Please Select</option>
<option value="ucsc">UC Santa Cruz</option>
<option value="ucb">UC Berkeley</option>
<option value="ucd">UC Davis</option>
<option value="uci">UC Irvine</option>
<option value="ucla">UC Los Angeles</option>
<option value="ucm">UC Merced</option>
<option value="ucr">UC Riverside</option>
<option value="ucsd">UC San Diego</option>
<option value="ucsf">UC San Francisco</option>
<option value="ucsb">UC Santa Barbara</option>
</select>
<label for="selectcampus">UC Campus:</label>
</td>

Answer 3

I think you need some CSS.
#test{
float:right;}
http://jsfiddle.net/m4onhxa9/