Problems with some radio buttons in html forms - css

Question

I am trying to align this radio buttons on my form, but for some reason they are kinda big and the texts are way above.
Here is my html page:
<div id="sabores">
<form action="" method="post">
<input type="radio" name="txt_sabor" value="natural" class="radiobtn" /> Natural </br>
<input type="radio" name="txt_sabor" value="laranja_com_acerola" class="radiobtn" /> Laranja com Acerola </br>
<input type="radio" name="txt_sabor" value="morango" class="radiobtn" /> Morango </br>
<input type="radio" name="txt_sabor" value="limao" class="radiobtn" /> Limão </br>
<input type="radio" name="txt_sabor" value="acai_com_guarana" class="radiobtn" /> Açaí com Guaraná</br>
<input type="radio" name="txt_sabor" value="uva" class="radiobtn" /> Uva </br>
<input type="radio" name="txt_sabor" value="abacaxi" class="radiobtn" /> Abacaxi </br>
</form>
</div>
and here is my CSS:
#sabores{
width: 370px;
height: 215px;
border: 1px solid #ccc;
float: left;
margin-top: 10px;
background: #fff;
color: #667;
font-size: 12px;
}
#sabores h2{
width: 364px;
color: #333;s
}
#sabores .radiobtn{
width: 15px;
height: 20px;
margin-left: 10px;
padding: 0 5px 0 5px;
display: block;
clear: left;
float: left;
vertical-align:bottom;
margin-top: 10px;
}

Answer 1

Your have mistype your br, instead of <br />. And to correct your problem and add a good accessibility practice at same time you can wrap your radio button with text in a label. You can use paragraphs <p> instead of <br /> too. And remove your clear: left; float:left you don't need to precise display:block if your element is floating.
#sabores .radiobtn{
width: 15px;
height: 20px;
margin-left: 10px;
padding: 0 5px 0 5px;
vertical-align:bottom;
margin-top: 10px;
}
<div id="sabores">
<form action="" method="post">
<label for="txt_sabor_natural"><!-- for with id value of input inside it-->
<input type="radio" name="txt_sabor" id="txt_sabor_natural" value="natural" class="radiobtn" /> Natural </label><br />
<label for="laranja">
<input type="radio" name="txt_sabor" id="laranja" value="laranja_com_acerola" class="radiobtn" /> Laranja com Acerola</label><br />
<label for="morango">
<input type="radio" name="txt_sabor" id="morango" value="morango" class="radiobtn" /> Morango </label><br />
<label for="limao">
<input type="radio" name="txt_sabor" id="limao" value="limao" class="radiobtn" /> Limão </label><br />
<label for="acai_com_guarana">
<input type="radio" name="txt_sabor" id="acai_com_guarana" value="acai_com_guarana" class="radiobtn" /> Açaí com Guaraná </label><br />
<label for="uva">
<input type="radio" name="txt_sabor" id="uva" value="uva" class="radiobtn" /> Uva </label><br />
<label for="abacaxi">
<input type="radio" name="txt_sabor" id="abacaxi" value="abacaxi" class="radiobtn" /> Abacaxi </label><br />
</form>
</div>
Better solution is to use an unordered list ul with li for each couple label + input or paragraphs, and remove your fixed height from sabores div :
<div id="sabores">
<form action="" method="post">
<p>
<label for="txt_sabor_natural"><!-- for with id value of input inside it-->
<input type="radio" name="txt_sabor" id="txt_sabor_natural" value="natural" class="radiobtn" /> Natural </label></p>
<p>
<label for="laranja">
<input type="radio" name="txt_sabor" id="laranja" value="laranja_com_acerola" class="radiobtn" /> Laranja com Acerola</label></p>
<p>
<label for="morango">
<input type="radio" name="txt_sabor" id="morango" value="morango" class="radiobtn" /> Morango </label></p>
<p>
<label for="limao">
<input type="radio" name="txt_sabor" id="limao" value="limao" class="radiobtn" /> Limão </label></p>
<p>
<label for="acai_com_guarana">
<input type="radio" name="txt_sabor" id="acai_com_guarana" value="acai_com_guarana" class="radiobtn" /> Açaí com Guaraná </label></p>
<p>
<label for="uva">
<input type="radio" name="txt_sabor" id="uva" value="uva" class="radiobtn" /> Uva </label></p>
<p>
<label for="abacaxi">
<input type="radio" name="txt_sabor" id="abacaxi" value="abacaxi" class="radiobtn" /> Abacaxi </label></p>
</form>
</div>
With style :
/*previous style*/
#sabores{
width: 370px;
/*height: 215px; don't need*/
border: 1px solid #ccc;
float: left;
margin-top: 10px;
background: #fff;
color: #667;
font-size: 12px;
}
#sabores .radiobtn{
width: 15px;
height: 20px;
margin-left: 10px;
padding: 0 5px 0 5px;
vertical-align:bottom;
}
#sabores p {
margin-bottom: 10px;
margin-top: 0;
}

Answer 2

Make the following changes to this class:
#sabores .radiobtn{
width: 15px;
height: 20px;
margin-left: 10px;
padding: 0 5px 0 5px;
margin-top: 10px;
vertical-align:bottom;
/*
Remove following css properties
display: block;
clear: left;
float: left;
*/
}
fiddle

Answer 3

Please pay more attention the follow class:
#sabores .radiobtn{
width: 15px;
height: 20px;
margin-left: 10px;
padding: 0 5px 0 5px;
display: block;
clear: left;
float: left;
vertical-align:bottom;
margin-top: 10px;
}
as you see, you use these attributes:
display:block; clear: left; float: left;
It makes your input Element out of page flow, so you can remove these attribute and everything will be ok!
I advise you can read it about Visual formatting model.(click here)