Border is not being applied to the whole div? - php

Question

I am trying to create a div (trending-panel) that is only 30% of the total page, in that div contains 10 generated divs (trending-div). The multiple generated divs contain an image, text ($title), and the number of views that article has ($Counter). For some odd reason, when I apply a border to the entire trending-panel, the border does not get applied to the last image and text. Even though the last image and text are printed out, the trending-panel is not counting it for some reason and only prints the border towards the first 9. Here's my code:
HTML CODE:
<div class="trending-panel">
<?php
$resultSet = $db->query("SELECT * FROM Articles ORDER BY Counter DESC, dateStamp DESC LIMIT 10");
if ($resultSet->num_rows != 0)
{
while ($rows = $resultSet->fetch_assoc())
{
$image = $rows["image"];
$title = $rows["title"];
$link = $rows["link"];
$count = $rows["Counter"];
echo "<div class='trending-div'><img src='{$image}'/><p>{$title}</p><p id='count'>{$count}</p></div>";
}
}
?>
</div> <!--End of trending panel div-->
CSS:
.trending-panel{
width: 30%;
border: 1px solid lightgray;
}
.trending-div{
position: relative;
clear: both;
border: 1px solid lightgray;
}
.trending-div img{
width: 45%;
height: 120px;
float: left;
}
.trending-panel p{
width: 54%;
float: right;
font-family: "Oswald";
font-size: 16px;
color: black;
}
#count{
position: absolute;
bottom: 0px;
right: 0px;
font-family: "Oswald";
font-size: 14px;
color: black;
}
Generated HTML:
<div class="trending-panel">
<div class='trending-div'><img src='/media/thumbnails/bus-falls-in-alligator-pond.jpg'/><p>School Bus Falls Into Alligator Pond</p><p id='count'>202254</p></div><div class='trending-div'><img src='/media/thumbnails/foods-that-can-kill-you.jpg'/><p>Top Ten Foods That Can Kill You</p><p id='count'>150136</p></div><div class='trending-div'><img src='/media/thumbnails/most-shocking-facts-about-disney.jpg'/><p>The Top Ten Most Shocking Facts About Disney</p><p id='count'>102508</p></div><div class='trending-div'><img src='/media/thumbnails/extremely-weird-religions.jpg'/><p>10 Extremely Weird Religions</p><p id='count'>98069</p></div><div class='trending-div'><img src='/media/entertainment/trump.jpg'/><p>This Is What Would Happen If You Stopped Sleeping</p><p id='count'>45646</p></div><div class='trending-div'><img src='/media/thumbnails/signs-you-grew-up-in-the-90s.jpg'/><p>10 Signs You Grew Up In The 90s</p><p id='count'>26183</p></div><div class='trending-div'><img src='/media/thumbnails/no-spin-earth.jpg'/><p>This Is What Would Happen If The Earth Stopped Spinning</p><p id='count'>7144</p></div><div class='trending-div'><img src='/media/thumbnails/bubble-gum-under-shoe.jpg'/><p>10 Unwritten Rules Everyone Should Follow</p><p id='count'>3593</p></div> </div> <!--End of trending panel div-->

Answer 1

It could be because you image tag doesn't have quotes around the src attribute value. Also add a closer for the image change:
echo "<div class='trending-div'><img src=$image><p>$title</p><p id='count'><$count</p></div>";
to:
echo "<div class='trending-div'><img src='{$image}'/><p>{$title}</p><p id='count'>{$count}</p></div>";
Try this, you have an '<' before $count, which isn't valid, if you want to use < or > then you have to use escape codes because these mark the start and end of tags.