radio button's vertical align and it's width

I have noticed that if I have a text and then a radio, like:开发者_开发知识库

<label for "myradio">Radio name</label>
<div class="holder">Yes <input type="radio" name="myradio" value="Yes"></div>
<div class="holder">No <input type="radio" name="myradio" value="No"></div>

Where:

label       { width: auto; margin-left: 15px; float: left; }
.holder     { float: left; line-height: 13px; margin: 6px 0 0 7px;  }
.holder input[type=radio]   { float: right; }

Now the problem with this is that, the radio appears after and a bit below (as if there is a top margin) the text "yes" or "no".

Now if I add a width (wide enough) to my .holder, I get both text and radio at the same line. However, if the width is smaller than the width of yes + radio, the radio gets positioned lower as before.

If it were only "yes" and "no", I could use a fixed width, but the problem is that those "yes" and "no" are database generated, and hence I can't control the text width. So I need a different way to put the text and radio in the same line.

Any idea guys ?

---

check my jsfiddle

is it what you wanted to achieve? just add

 .holder span{float: left;margin-right: 3px;}
 .holder input{float: left;}

and wrap "yes" and "no" in

 <span></span>

tag