Jump to content

Two column alignment


adman4054

Recommended Posts

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>




post-102515-0-72281600-1368989038_thumb.jpg

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.