Float right check boxes, buttons and inputbox - html

Question

I reckon it must be fairly simple but i can't seem to figure out how to get my floats right. The picture shows what i want vs what i have. If you provide an answer please provide the logic also. thanks.
<div id="racks" style="overflow:auto">
<div id="selStat">
<p>No station selected</p>
</div>
<hr id="hrtest">
<div id="rackAction">
<p>Choose the type of card, then select which action to perform.</p>
<div id="radio">
Type:
<div class="fr">
<input type="radio" id="radioS" name="radio"><label for="radioS">S</label>
<input type="radio" id="radioP" name="radio"><label for="radioP">P</label>
<input type="radio" id="radioV" name="radio"><label for="radioV">V</label>
</div></div>
<p>Cardnumber: <input id="cardNum" class="fr" type="number" size="1"/> </p>
<p>Action:
<div class="fr">
<button onClick="addRack()" type="button">Add</button>
<button onClick="deleteRack()" type="button">Delete</button>
</div></p>
</div>
</div>
CSS is as follow:
.fr{
float:right;
}

Answer 1

Syntactically, you can't have a div inside of a p tag. On that topic, check this SO Question. To get the elements on the same line, you can place the "Action" text in a seperate div, and float it left.
The HTML:
<div id="racks" style="overflow:auto">
<div id="selStat">
<p>No station selected</p>
</div>
<hr id="hrtest">
<div id="rackAction">
<p>Choose the type of card, then select which action to perform.</p>
<div id="radio">
Type:
<div class="fr">
<input type="radio" class="margin-bottom" id="radioS" name="radio"><label for="radioS">S</label>
<input type="radio" class="margin-bottom" id="radioP" name="radio"><label for="radioP">P</label>
<input type="radio" class="margin-bottom" id="radioV" name="radio"><label for="radioV">V</label>
</div>
</div>
<p>Cardnumber: <input id="cardNum" class="fr" type="number" size="1"/> </p>
<div class="fl">Action:</div>
<div class="fr">
<button onClick="addRack()" type="button">Add</button>
<button onClick="deleteRack()" type="button">Delete</button>
</div>
</div>
</div>
The CSS:
.fr{
float:right;
}
.fl {
float:left;
}
.margin-bottom {
margin-bottom:10px;
}
The fiddle.
Edit:
As per the comments, you can add a class to the radio buttons in question, and add additional margins or padding to the bottom of the radio buttons. I have updated the code to include the class additions and the CSS.