3 divs Inline to a row

[espresso]

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:

[telos]

Try:
.claimRow div{
display:inline-block;
float:left;
width: 250px;
height: 250px;
}

If they're all the same height/width, you don't even need div around each row, only one wrapper for all the individual items and they'll wrap on their own.

[espresso]

thanks but it did not work..I had tried to add inline and a height before posting this also but same thing...no luck.

[espresso]

Maybe it would help if I had the freakin style sheet included in my page? resolved.

[RyanReese]

Hi, @telos, if you specify float and display property at the same time, then the display property is ignored for a good majority of the values (some are recognized though)

Display:inline-block in that example will be ignored since it is one of the good chunk of values ignored

[deathshadow60]

1) Those do not appear to be paragraph elements, why are they in paragraph tags?

2) there is no 'disabled' property on SPANS.

3) probably no reason to be using style="clear:both;" if you just set wrapping behavior on .claimRow in the first place (overflow:hidden good as always)

4) You really don't need the majority of the tags you used - and the abuse of said tags is the OPPOSITE of semantics since semantic markup is NOT just about slapping tags with meanings around everything, it's also about NOT slapping tags with meanings (like P) around things that don't mean that!

So, let's rip out the pointless paragraph tags and the unneccessary/unwanted spans. (especially since the properties on the spans were completely invalid)

<div class="claimRow">
  <div>
    <img src="images/program/giftCert10.jpg" /><br />
 		<input
 			type="radio"
 			id="ctl00_mainContent_rbn200Points"
 			name="ctl00$mainContent$rewardPointList"
 			value="rbn200Points"
 			disabled="disabled"
 		/>
 		<label for="ctl00_mainContent_rbn200Points">200 pts</label>
  </div>

etc, etc, etc...

.claimRow {
	overflow:hidden; /* wrap floats */
	width:100%; /* trip haslayout, wrap floats in IE */
}

.claimRow div {
	float:left;
	text-align:center;
}

.claimRow img {
	display:block;
	margin:0 auto;
}

Pretty simple. Though I have to ask, how big are the images, are you SURE the math for the outer container equals the width of the three images? Adding a WIDTH to .claimRow div and making sure your math is right would be what you probably REALLY need; I'd have to see the ACTUAL page and content in question to say for sure.

Though that ct100 crap raises the hair on the back of my neck. Trying to remember just which of the form handlers on my **** list uses those.