Creating a three column layout with PHP - php

Question

I am trying to create a three column layout with PHP/HTML/CSS. The left column contains an image then text underneath that image, each image and text is on a separate line. The right column is the same as the left column, but with different images and texts. The middle column contains images and texts NEXT to each other, so one image and one text is on one line, one image and one text is on the next line and so forth. I have a container div that will house these columns, the container is 85% of the page. So each column will be roughly 28%. Right now, I am focusing on just the left and right columns. These columns only have images and not text for simplicity sake (My output image). When I run the code, the output is each image sitting next to each other, instead of each image being on a separate line floating to their respective positions.
PHP/HTML
<?php
$resultSet = $db->query("SELECT * FROM table");
if ($resultSet->num_rows != 0)
{
while ($rows = $resultSet->fetch_assoc())
{
$id = $rows["id"];
$images = $rows["image"];
$text = $rows["text"];
echo "<div id=container>";
if ($id > 3 && $id < 8)
{
echo "<div id=left>";
echo "<img src=$images>";
echo "<p>$text</p>";
echo "</div>";
}
if ($id > 8)
{
echo "<div id=right>";
echo "<img src=$images>";
echo "<p>$text</p>";
echo "</div>";
}
echo "</div>";
}
}
?>
CSS
#container{
position: relative;
margin: 0 auto;
width: 85%;
height: auto;
}
#left{
float: left;
width: 28.33%;
}
#left img{
width: 100%;
}
#right{
float: right;
width: 28.33%;
}
#right img{
width: 100%;
}
This is how the output looks like:
Dataset:
<div id=container></div><div id=container></div><div id=container></div><div id=container><div id=left><img src=http://www.clker.com/cliparts/R/r/2/q/P/4/blue-number-one-hi.png><br><p>4</p></div></div><div id=container><div id=left><img src=http://bsccongress.com/im3/blue-number-two-clip-art.png><br><p>5</p></div></div><div id=container><div id=left><img src=http://www.clker.com/cliparts/L/H/T/b/g/N/three-md.png><br><p>6</p></div></div><div id=container><div id=left><img src=http://2.bp.blogspot.com/-x0uSxqUaYQA/UCEr1WV_1AI/AAAAAAAAC_0/QHrtbsfcK1s/s1600/blue-number-four-md.png><br><p>7</p></div></div><div id=container></div><div id=container><div id=right><img src=http://bsccongress.com/im7/blue-number-five-clip-art.png><p>9</p></div></div><div id=container><div id=right><img src=http://www.clipartbest.com/cliparts/Rid/gq7/Ridgq7AnT.png><p>10</p></div></div>
It is creating an inline of the images instead of putting them on separate lines. How can I correct this problem?

Answer 1

Grid layout
Since you are looking for a grid layout, you would find a framework such as Bootstrap very helpful. With Bootstrap, your HTML would be as simple as:
<div class="row">
<div class="col-xs-4">Left</div>
<div class="col-xs-4">Middle</div>
<div class="col-xs-4">Right</div>
</div>
If you don't want to use a library for some reason (why not?) then take a look at their CSS.
Don't repeat yourself
Create your class as a variable, then create the HTML:
$class = 'middle';
if( something_here ){
$class = 'left';
}
echo "<div class='$class'>Content</div>";
Convert special characters
Your database variables might contain characters that cause errors in your HTML. To prevent that, create a simple function:
function html($str){
return htmlspecialchars($str, ENT_QUOTES);
}
Then use:
<?php echo html($row['field_name']); ?>
Your images issue
If you want your images to be blocks, simply use a class called block on your images, and create this CSS:
.block{
display:block;
}
PHP templating
Instead of:
$this = $row['this'];
$that = $row['that'];
echo "<p>$this</p>";
echo "<div>$that</div>";
You can actually jump between PHP and HTML:
<?php if( something_here ){ ?>
<p><?=html($row['this'])?></p>
<div><?=html($row['that'])?></div>
<?php } ?>
Now your code is shorter, easier to edit, and easier to read, including your source code.