Triple Column Layout in CSS

Hi just a quick question. I am designing a new site and have almost completed everything I want to design-wise, however I need to create a three-column layout inside my content div, but am not having much luck at the moment.

					<a href=<?php echo $url; ?>><div id="pbox">
						<div id="pheader"><?php echo $title; ?></div>
						<div id="pcontent"><img src="<?php echo $imgsrc; ?>"> <br /><?php echo $desc; ?></div>
					</div></a>
						<?php  }
						
						}else{
						   die(mysql_error());
						  }
										
					
					?>
					
					

PHP:

This piece of code will be generated unlimited times until all the rows in the database are echoed out. I need to have three columns per row, with an unlimited number of rows.

At the moment it works because I have three seperate boxes, box 1, 2 and 3. When I use PHP, however, I cannot define each box separately, and so need code which can work with just one class.

/*Popular code*/
	
	#pcontainer{
	position:relative;
	background-color:#eee;
	float:left;
	width:100%;	
	border-bottom-right-radius:10px 10px;
	border-bottom-left-radius:10px 10px;
	}
	
	[B]#pbox, #pbox1, #pbox2{
		background-color:#f5f5f5;
		width:25%;
		position:relative;
		margin-left:4%;
		margin-right:4%;
		border-top-left-radius:10px 10px;
		border-top-right-radius:10px 10px;
		margin-top:4em;
		float:left;
		margin-bottom:2em;
	}[/b]
	
	#pcontainer a{
	text-decoration:none;
	color:#000;
	}	
	
	#pheader{
	padding:0.3em 0 0.3em 0;
	background-color:#dedede;
	font-weight:bold;
	text-align:center;
	border-top-left-radius:5px 5px;
	border-top-right-radius:5px 5px;
	}
	#pcontent{
	text-align:center;
	min-height:6em;
	padding: 0.5em 0.3em 0.5em 0.3em;
	font-size:11pt;
	position:relative;
	top:100%;
	}

HTML:

Here is the static HTML that works how I want, but doesn't pull data from the database, and so cannot be used in the future (note box 1,2 and 3 are defined).

<div id="pcontainer">
					<a href="#"><div id="pbox">
						<div id="pheader">Winning Headers</div>
						<div id="pcontent"><img src="headers.png"> <br />A video that will help you win the majority of headers against your opponent, a key skill needed to become a top FIFA player.</div>
					</div></a>
					
					<a href="#"><div id="pbox1">
						<div id="pheader">Effective Defending</div>
						<div id="pcontent"><img src="defending.png"><br />A video that explains a very effective defending technique that is rarely used in FIFA.</div>
					</div></a>
					
					<a href="#"><div id="pbox2">
						<div id="pheader">When and How to use Skills</div>
						<div id="pcontent"><img src="liimg.png"> <br />A video full of tips on the best times to use certain skills.</div>
					</div>
					</a>
					
					
					
					
					
				</div>

HTML:

If this is unclear, I apologise, please ask for any code or pictures you need to assist me. Any assistance is appreciated, and reps will be given (if they still have reps on this forum ). Thanks.

 

FIXED IT . I'm very happy. It turns out I was echoing the container DIV each time without realising it. Taking it out of the loop made things work ok. Requesting thread deletion now.

 

Uhm, just a few things...

1) why aren't your headers... numbered heading tags?

2) You do know DIV can't go inside an anchor, right? (unless you're doing HTML 5-tardery, in which case the outer DIV should be SECTIONS and it's going to be broken in a lot of browsers)

3) You'd probably have a lot less headaches if you stopped opening and closing PHP on very line multiple times and made that a single echo statement.

4) you can't use the same ID more than once...

Before asking for help,you should try running your output past validation.

 

Huh, double posted instead of edit? nm