Two column alignment

[adman4054]

I have searched everywhere for an answer, but I don't think I'm asking the question in the right way. I have two columns, but I need the elements to stack and cant seem to make anything work. I also want to add a background color to make the elements stand out. If you look at the image attached,  it shows that the left column doesnt but up against the bottom of the element above it, it seems to align itsself to the right column. Appreciate any help. Thanks in advance

 <style type="text/css">
	#showcase {
		width: 100%;
		margin-bottom: 20px;
		margin-top: 4px;
		vertical-align:top;
	}
		#showcase > div {
			width: 280px;
			float: left;
			border: 1px solid #ddd;
			padding: 5px;
            vertical-align:top;
			margin-left: 0px;
		}
			#showcase > div:first-child {
				margin-left: 0;
                vertical-align:top;
			}
			#showcase > div > div {
				
				float: right;
				margin-left: 8px;
                vertical-align:top;
				font: 12px arial, sans-serif;
			}
			#showcase > div > img:last-child {
				width: 150px;
				clear: both;
				margin-top:16px;
				margin-left:0px;
                vertical-align:top;
			}
    img.floatLeft { 
    float: left; 
    margin: 4px; 
    }
    img.floatRight { 
    float: right; 
    margin: 4px; 
    }

    </style>


    <div class="module" style="margin-top:0px;">
	<div class="module-header"><h3>Product Spotlight</h3></div>
    </div>
    <div id="showcase">



	<? while($row = mysql_fetch_array($products_showcase_query)): ?>

		<div>
			<span style="display: block;font-size:20px;line-height:        130%;margin-bottom:4px;"><?=              $row['product_headline'] ?></span>
			
			
			<img src="../product_images/<?= $row['product_image'] ?>" style="width: 134px; float: left;" />
			
			<div><div class="floatLeft">
				<?= $row['product_summary'] ?>
			</div></div>
			
			<img src="../product_logos/<?= $row['product_logo'] ?>" />
		
		</div>

	<? endwhile ?>
	<span style="display: block;clear:both;"></span>
        </div>

[Love2c0de]

Good evening,

 

I'm sorry but it's not clear for me either. So what column are you having issues with if we go from that image you posted? You said you have 2 columns but I see 3.

 

When you say you want them to stack, what exactly do you mean?

 

Kind regards,

 

L2c.

[adman4054]

Good evening,

 

I'm sorry but it's not clear for me either. So what column are you having issues with if we go from that image you posted? You said you have 2 columns but I see 3.

 

When you say you want them to stack, what exactly do you mean?

 

Kind regards,

 

L2c.

Thanks for the reply. The third column is servered by a seperate include file, so it doesnt have anything to do with the other 2. The two coulmns have ads for lack of a better term. Each ad has two images, a headline and some text. These ads are contained in the "Showcase div", but they wont align to the bottom of the ad on top of it, there is white space on the left column between the ads, but not on the right column. I dont want any white space and want each ad to follow the one underneath it. Thanks again.

[Love2c0de]

Have you got a live example I can play around with?

 

Kind regards,

 

L2c.

[adman4054]

Have you got a live example I can play around with?

 

Kind regards,

 

L2c.

no, sorry i dont. thanks for trying

[haku]

I think you are looking for 'faux columns'. Google it, and you should get your answer.