Radio Button with images formatting - html

Question

I am trying to have three images across each line with a radio button underneath each. I am not too familiar with forms and I just cannot figure out why the images are rendering out this way. Anyone have any thoughts or any ideas at how to create this?
/jess/design.html
edit: figured out part of it... problem with the width on forms. still trying to figure out how to get the radio button underneath if anyone cant help with that.

Answer 1

Just put each radio button with its image inside a div with width: 100%, It should do the trick.
EDIT: No wait, that will put the radio on the right side of the image, try also adding 100% width to the image inside the wrapping div and setting the width of the wrapping div to the value you want for the number of column desired (50% for 2 columns)

Answer 2

you can this one, http://jsfiddle.net/ayBeh/
I suggest you that ID should Use on time at same page, so please use .bead instead "#bead",
sorry to say BRO, I Saw your code, not much cleaner , there is lots of cleanup issues,
I think Your not familiar with HTML also, but anyways you tried best, keep it up, if want help contact me any time,

Answer 3

Nest the divs and apply the appropriate rules:
See it here: http://jsfiddle.net/SREMB/4/
html, body {
width: 100%;
}
.row {
text-align: center;
width: 100%;
display: inline-block;
white-space: nowrap;
}
.cell {
padding: 10px;
display: inline-block;
text-align: center;
}
img {
border: 2px solid black;
}
​
HTML
<div class="row">
<div class="cell">
<img src="http://connorreaumond.com/jess/images/beads/grey.gif"><br>
<input type="radio" name="bead" value="grey" />
</div>
<div class="cell">
<img src="http://connorreaumond.com/jess/images/beads/ivory.gif"><br>
<input type="radio" name="bead" value="ivory" />
</div>
<div class="cell">
<img src="http://connorreaumond.com/jess/images/beads/mattsmoke.gif"><br>
<input type="radio" name="bead" value="mattsmoke" />
</div>
</div>
<br><br>
<div class="row">
<div class="cell">
<img src="http://connorreaumond.com/jess/images/beads/grey.gif"><br>
<input type="radio" name="bead" value="grey" />
</div>
<div class="cell">
<img src="http://connorreaumond.com/jess/images/beads/ivory.gif"><br>
<input type="radio" name="bead" value="ivory" />
</div>
<div class="cell">
<img src="http://connorreaumond.com/jess/images/beads/mattsmoke.gif"><br>
<input type="radio" name="bead" value="mattsmoke" />
</div>
</div>
<br><br>
<div class="row">
<div class="cell">
<img src="http://connorreaumond.com/jess/images/beads/grey.gif"><br>
<input type="radio" name="bead" value="grey" />
</div>
<div class="cell">
<img src="http://connorreaumond.com/jess/images/beads/ivory.gif"><br>
<input type="radio" name="bead" value="ivory" />
</div>
<div class="cell">
<img src="http://connorreaumond.com/jess/images/beads/mattsmoke.gif"><br>
<input type="radio" name="bead" value="mattsmoke" />
</div>
</div>
<br><br>
​