SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Evangelist
    Join Date
    Oct 2008
    Posts
    551
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    3 divs Inline to a row

    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:
    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:


  2. #2
    SitePoint Addict telos's Avatar
    Join Date
    Mar 2005
    Location
    192.168.2.34
    Posts
    279
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  3. #3
    SitePoint Evangelist
    Join Date
    Oct 2008
    Posts
    551
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks but it did not work..I had tried to add inline and a height before posting this also but same thing...no luck.

  4. #4
    SitePoint Evangelist
    Join Date
    Oct 2008
    Posts
    551
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Maybe it would help if I had the freakin style sheet included in my page? resolved.

  5. #5
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,622
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    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
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  6. #6
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    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)

    Code:
    <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...

    Code:
    .claimRow {
    	overflow:hidden; /* wrap floats */
    	width:100&#37;; /* 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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •