How can I create 3 columns in PHP and CSS?

Question

I am having issues making this work within my website. I have 3 columns in CSS. I am using the class of one_third for the first two columns and one_third column_last for the final column. I have multiple rows:

<div class="one_third">
  <img src="images/content/about-grow.jpg" alt="" />
  <h4>Grow a Garden</h4>
  <p>Sed posuere consectetur est at lobortis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sed odio dui. sed.</p>
</div>

<div class="one_third">
  <img src="images/content/about-wildlife.jpg" alt="" />
  <h4>Protect Wildlife</h4>
  <p>Sed posuere consectetur est at lobortis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sed odio dui. sed.</p>
</div>

<div class="one_third column_last">
  <img src="images/content/about-volunteer.jpg" alt="" />
  <h4>Volunteer</h4>
  <p>Sed posuere consectetur est at lobortis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sed odio dui. sed.</p>
</div>

Here is my php. It is only outputting two columns as of now. I cannot figure out how to make the last column output correctly. Please help!

<?
include("includes/connect.php");
$staff = mysql_query("SELECT * FROM programs ORDER BY title ASC");
$numrows=@mysql_num_rows($staff);
if($numrows != 0) {
while ($result_staff = mysql_fetch_array($staff)) {
?>

<?
if ($result_staff['image'] == "") {
?>

<div align="center" style="padding-bottom:2%" class="one_third">
    <a href="images/content/<? echo $result_staff['image2']; ?>" class="fancybox" title="<? echo $result_staff['name']; ?>"><img src="images/content/<? echo $result_staff['image2']; ?>" alt="<? echo $result_staff['name']; ?>" border="1" /></a><br /><h4><? echo strtoupper($result_staff['title']); ?></h4><p><? echo $result_staff['content']; ?></p>
</div>

<? } else { ?>

<div align="center" style="padding-bottom:2%" class="one_third">
    <a href="images/content/<? echo $result_staff['image']; ?>" class="fancybox" title="<? echo $result_staff['name']; ?>"><img src="images/content/<? echo $result_staff['image']; ?>" alt="<? echo $result_staff['name']; ?>" border="1" /></a><br /><h4><? echo strtoupper($result_staff['title']); ?></h4><p><? echo $result_staff['content']; ?></p>
</div>

<? } ?>
<? } } ?>

If I understand correctly, the html code above doesn't create 3 colums. Could you provide your css for these classes? — Victor
– Victor, Commented Jul 16, 2013 at 15:20

user3969873 · Accepted Answer · 2014-08-27 04:46:41Z

Use css float left. That will give column layout for dynamic content. Sample working url available here: http://sugunan.net/demo/float.php

Following is the source code.

<style>
.one_third{
    float: left;
    border: 1px solid;
    width:200px;
}
.wrapper{
    width: 610px;
}
.clear{
    clear: boath;
}
</style>


<div class="wrapper">

<?php for($i=0; $i<5; $i++){ ?>

<div class="one_third">
  <img src="photo.jpg" alt="" />
  <h4>Grow a Garden</h4>
  <p>Sed posuere consectetur est at lobortis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sed odio dui. sed.</p>
</div>

<div class="one_third">
  <img src="photo.jpg" alt="" />
  <h4>Protect Wildlife</h4>
  <p>Sed posuere consectetur est at lobortis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sed odio dui. sed.</p>
</div>

<div class="one_third column_last">
  <img src="photo.jpg" alt="" />
  <h4>Volunteer</h4>
  <p>Sed posuere consectetur est at lobortis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sed odio dui. sed.</p>
</div>
<div class="clear"></div>

<?php } ?>

</div>

David · Accepted Answer · 2013-07-16 15:20:10Z

0

In your example markup, it looks like the third column has a specific CSS class which differentiates it from the others:

class="one_third column_last"

But your PHP code isn't outputting anything with that class:

class="one_third"

This is mostly a guess based on the limited information provided, but you probably need to have a div with the column_last CSS class to be the third column. In fact, you're not outputting a third div at all.

answered Jul 16, 2013 at 15:20

David

221k42 gold badges247 silver badges338 bronze badges

Comments

aowie1 · Accepted Answer · 2013-07-16 22:38:27Z

0

You aren't adding your column_last class to any of the columns.

First, put an iterator on your while loop. Define $i = 0; right before the while loop. Then $i++; right before the while loop ends.

Then you can use this iterator to determine where you are in the results set and append the class accordingly.

class="one_third <?php if($i == $numrows) echo 'column_last'; ?>"

edited Jul 16, 2013 at 22:38

answered Jul 16, 2013 at 15:31

aowie1

8468 silver badges21 bronze badges

Collectives™ on Stack Overflow

How can I create 3 columns in PHP and CSS?

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related