Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Aug 2011
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    [Easy fix] Issue with objects not aligning properly in columns

    Hi guys.

    I've done quite a bit of PHP and C# programming throughout my time but this CSS stuff is foreign to me! Go easy on this newbie, please

    I want my products to appear in a two column fashion, e.g.

    Code:
    __________________
    Product 1 | Product 2
    __________________
    Product 3 | Product 4
    __________________
    Etc. However, this is what I have: http://bit.ly/r5sjSy

    As you can see, the products get kind of jumbled. I need some sort of fixed height display or something but I'm not sure how to produce the results I want. I have tried tinkering with the CSS and this is what I have:

    Code:
    .ItemHolderLeft {
    	
    	float:left; 
    	width:48%;
    }
    
    .ItemHolderRight {
    	
    	float:right; 
    	width:48%;
    }
    Any and all help is GREATLY appreciated!!!

  • #2
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    if each one is going to be the same height, you can just set a height to the div, if they are going to be different sizes, you need to make 2 columns

    Code:
    .left { float: left; width: 48%; }
    .right { float: right; width: 48%; }
    Code:
    <div class="left">
     <!-- left stuff -->
    </div>
    <div class="right">
     <!-- right stuff -->
    </div>
    Last edited by Sammy12; 08-07-2011 at 06:17 PM.

  • #3
    New to the CF scene
    Join Date
    Aug 2011
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Sammy12 View Post
    if each one is going to be the same height, you can just set a height to the div, if they are going to be different sizes, you need to make 2 columns

    Code:
    .left { float: left; width: 48%; }
    .right { float: right; width: 48%; }
    Code:
    <div class="left">
     <!-- left stuff -->
    </div>
    <div class="right">
     <!-- right stuff -->
    </div>
    Sammy,

    Thanks for your help. I have edited my PHP code to output dynamic div rows based on the height of the product image, but the rows are still not lining up properly. Please see my URL to see what I am talking about:

    http://bit.ly/r5sjSy
    Last edited by detroitlaptop; 08-07-2011 at 07:28 PM.

  • #4
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts



    add a <div style="clear:both;"></div>
    once again, you should divide the page into two columns since this is just a temporary fix
    Last edited by Sammy12; 08-08-2011 at 01:10 AM.


  •  

    Posting Permissions

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