...

View Full Version : [Easy fix] Issue with objects not aligning properly in columns



detroitlaptop
08-07-2011, 05:31 PM
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 :thumbsup:

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



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



.ItemHolderLeft {

float:left;
width:48%;
}

.ItemHolderRight {

float:right;
width:48%;
}

Any and all help is GREATLY appreciated!!! :)

Sammy12
08-07-2011, 06:14 PM
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



.left { float: left; width: 48%; }
.right { float: right; width: 48%; }




<div class="left">
<!-- left stuff -->
</div>
<div class="right">
<!-- right stuff -->
</div>

detroitlaptop
08-07-2011, 06:41 PM
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



.left { float: left; width: 48%; }
.right { float: right; width: 48%; }




<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

Sammy12
08-08-2011, 01:07 AM
http://i1114.photobucket.com/albums/k535/auroralight1/Untitled-70.png


add a <div style="clear:both;"></div>
once again, you should divide the page into two columns since this is just a temporary fix



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum