Tengo que hacer un cuestionario con radio buttons, pero no consigo que me queden alineados tanto vertical como horizontalmente.
Necesito hacer esto
http://s2.subirimagenes.com/otros/previo/thump_9339440duda1.jpg
Y no lo consigo
El codigo que tengo es este, pero no me queda bien alineado
<form id="diabetes">
<fieldset id="tool">
<div id="diabetes-tool">
<p><div id="q1">How old are you?</div>
<div id="a11"><label for="1-25"> 1-25 </label>
<input type="radio" name="age" id="125" value="zero" checked="true"></div>
<div id="a12"><label for="26-40"> 26-40 </label>
<input type="radio" name="age" id="2640" value="five"></div>
<div id="a13"><label for="40-60"> 40-60 </label>
<input type="radio" name="age" id="4060" value="eight"></div>
<div id="a14"><label for="60+"> 60+ </label>
<input type="radio" name="age" id="60+" value="ten"></div></p><br>
<p><div id="q2">What is your BMI?</div>
<div id="a21"><label for="0-25"> 0-25 </label>
<input type="radio" name="BMI" id="025" value="zero" checked="true"></div>
<div id="a22"><label for="26-30"> 26-30 </label>
<input type="radio" name="BMI" id="2630" value="zero"></div>
<div id="a23"><label for="31-35"> 31-35 </label>
<input type="radio" name="BMI" id="3135" value="nine"></div>
<div id="a24"><label for="35+"> 35+ </label>
<input type="radio" name="BMI" id="35+" value="ten"></p></div><br>
<p><div id="q3">Does anybody in your family have diabetes?</div>
<div id="a31"><label for="No"> No </label>
<input type="radio" name="family" id="nofamily" value="zero" checked="true"></div>
<div id="a32"><label for="grandparent"> Grandparent </label>
<input type="radio" name="family" id="grandparent" value="seven"></div>
<div id="a33"><label for="Sibling"> Sibling </label>
<input type="radio" name="family" id="sibling" value="fifteen"></div>
<div id="a34"><label for="parent"> Parent </label>
<input type="radio" name="family" id="parent" value="fifteen"></p></div><br>
<p><div id="q1">How would you describe your diet?</div>
<div id="a41"><label for="Low"> Low sugar </label>
<input type="radio" name="sugar" id="lowsugar" value="zero" checked="true"></div>
<div id="a42"><label for="normal"> Normal sugar</label>
<input type="radio" name="sugar" id="grandparent" value="zero"></div>
<div id="a43"><label for="quite"> Quite high sugar?</label>
<input type="radio" name="sugar" id="sibling" value="seven"></div>
<div id="a44"><label for="high"> High sugar </label>
<input type="radio" name="sugar" id="parent" value="ten"></p></div><br>
</div>
<input type="submit" value="Calculate">
</fieldset>
Y el css:
#diabetes-tool {
width: 200px;
padding: 25px 0;
margin: 0;
overflow: hidden;
width: 100%;
}
#question {
width: 200px;
padding: 25px 0;
margin: 0;
float: left;
text-align: left;
}
#q1 {
width: 200px;
padding: 25px 0;
margin: 0;
float: left;
text-align: left;
}
#a11 {
width: 200px;
padding: 25px 0;
margin: 0;
float: left;
}
#a12 {
width: 200px;
padding: 25px 0;
margin: 0;
float: left;
}
#a13{
width: 200px;
padding: 25px 0;
margin: 0;
float: left;
}
#a14 {
width: 200px;
padding: 25px 0;
margin: 0;
float: left;
}
#q2 {
width: 200px;
padding: 25px 0;
margin: 0;
float: left;
text-align: left;
}
#a21 {
width: 200px;
padding: 25px 0;
margin: 0;
float: left;
}
#a22 {
width: 200px;
padding: 25px 0;
margin: 0;
float: left;
}
#a23{
width: 200px;
padding: 25px 0;
margin: 0;
float: left;
}
#a24 {
width: 200px;
padding: 25px 0;
margin: 0;
float: left;
}
#q3 {
width: 200px;
padding: 25px 0;
margin: 0;
float: left;
}
#a31 {
width: 200px;
padding: 25px 0;
margin: 0;
float: left;
}
#a32 {
width: 200px;
padding: 25px 0;
margin: 0;
float: left;
}
#a33{
width: 200px;
padding: 25px 0;
margin: 0;
float: left;
}
#a34 {
width: 200px;
padding: 25px 0;
margin: 0;
float: left;
}
#q4 {
width: 200px;
padding: 25px 0;
margin: 0;
float: left;
}
#a41 {
width: 200px;
padding: 25px 0;
margin: 0;
float: left;
}
#a42 {
width: 200px;
padding: 25px 0;
margin: 0;
float: left;
}
#a43{
width: 200px;
padding: 25px 0;
margin: 0;
float: left;
}
#a44 {
width: 200px;
padding: 25px 0;
margin: 0;
float: left;
}