I’m trying to get 3 to a row. That is, the 3 divs in each div row need to align up next to each other, not below so that I end up with a grid (3 image/radio button combos) in a row lined up side by side in each row
The code:
.claimRow div
{
float: left;
}
.claimOption
{
text-align: center;
}
<div class="claimRow">
<div>
<p><img src="images/program/giftCert10.jpg" /></p>
<p class="claimOption"><span disabled="disabled"><input id="ctl00_mainContent_rbn200Points" type="radio" name="ctl00$mainContent$rewardPointList" value="rbn200Points" disabled="disabled" /><label for="ctl00_mainContent_rbn200Points">200 pts</label></span></p>
</div>
<div>
<p><img src="images/program/shipping.jpg" /></p>
<p class="claimOption"><span disabled="disabled"><input id="ctl00_mainContent_rbn250Points" type="radio" name="ctl00$mainContent$rewardPointList" value="rbn250Points" disabled="disabled" /><label for="ctl00_mainContent_rbn250Points">250 pts</label></span></p>
</div>
<div>
<p><img src="images/program/giftCert25.jpg" /></p>
<p class="claimOption"><span disabled="disabled"><input id="ctl00_mainContent_rbn400Points" type="radio" name="ctl00$mainContent$rewardPointList" value="rbn400Points" disabled="disabled" /><label for="ctl00_mainContent_rbn400Points">400 pts</label></span></p>
</div>
</div>
<div class="claimRow" style="clear: both">
<div>
<p><img src="images/program/giftCert50.jpg" /></p>
<p class="claimOption"><span disabled="disabled"><input id="ctl00_mainContent_rbn500Points" type="radio" name="ctl00$mainContent$rewardPointList" value="rbn500Points" disabled="disabled" /><label for="ctl00_mainContent_rbn500Points">500 pts</label></span></p>
</div>
<div>
<p><img src="images/program/ship.jpg" /></p>
<p class="claimOption"><span disabled="disabled"><input id="ctl00_mainContent_rbn600Points" type="radio" name="ctl00$mainContent$rewardPointList" value="rbn600Points" disabled="disabled" /><label for="ctl00_mainContent_rbn600Points">600 pts</label></span></p>
</div>
</div>
How it looks now:
How I am trying but can’t get it to look: