Jump to content


Photo

Two column alignment

css html php

  • Please log in to reply
5 replies to this topic

#1 adman4054

adman4054

    Advanced Member

  • Members
  • PipPipPip
  • 47 posts

Posted 19 May 2013 - 01:44 PM

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>




Attached Files



#2 Love2c0de

Love2c0de

    Advanced Member

  • Members
  • PipPipPip
  • 365 posts
  • LocationThe Pleiades
  • Age:23

Posted 19 May 2013 - 02:12 PM

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.



#3 adman4054

adman4054

    Advanced Member

  • Members
  • PipPipPip
  • 47 posts

Posted 19 May 2013 - 02:18 PM

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.



#4 Love2c0de

Love2c0de

    Advanced Member

  • Members
  • PipPipPip
  • 365 posts
  • LocationThe Pleiades
  • Age:23

Posted 19 May 2013 - 02:29 PM

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

 

Kind regards,

 

L2c.



#5 adman4054

adman4054

    Advanced Member

  • Members
  • PipPipPip
  • 47 posts

Posted 19 May 2013 - 02:34 PM

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

 

Kind regards,

 

L2c.

no, sorry i dont. thanks for trying :)



#6 haku

haku

    Advanced Member

  • Staff Alumni
  • 6,172 posts

Posted 19 May 2013 - 09:01 PM

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




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users

Cheap Linux VPS from $5
SSD Storage, 30 day Guarantee
1 TB of BW, 100% Network Uptime

AlphaBit.com