Why are the columns stacked up? - php

Question

I am making a small shop and I have a page where I display my products. The code of this page looks like this:
<?php
error_reporting(E_ALL); ini_set('display_errors', 1);
if(isset($_GET['action']) && $_GET['action']=="add"){
$id=($_GET['id']);
if(isset($_SESSION['cart'][$id])){
$_SESSION['cart'][$id]['quantity']++;
}else{
$sql_s="SELECT * FROM products
WHERE productCode='{$id}'";
$query_s=mysql_query($sql_s) or die(mysql_error());
if(mysql_num_rows($query_s)!=0){
$row_s=mysql_fetch_array($query_s);
$_SESSION['cart'][$row_s['productCode']]=array(
"quantity" => 1,
"price" => $row_s['buyPrice']
);
}else{
$message="This product id it's invalid!";
}
}
}
?>
<h1>Classic Cars</h1>
<?php
if(isset($message)){
echo "<h2>$message</h2>";
}
?>
<div class="container">
<?php
$sql="SELECT * FROM products ORDER BY productName ASC";
$query=mysql_query($sql) or die(mysql_error());
while ($row=mysql_fetch_array($query)) {
?>
<div class="row">
<div class="col-xs-12 col-sm-4 col-md-3">
<div class="recent-work-wrap">
<img class="img-responsive" src="images/portfolio/recent/item1.png" alt="">
<div class="overlay">
<div class="recent-work-inner">
<h3><?php echo $row['productName'] ?> </h3>
<p>€<?php echo $row['buyPrice'] ?></p>
<a class="btn btn-login" href="register.php">Add to cart</i></a>
<a class="btn btn-login" href="register.php">Read more</i></a>
</div>
</div>
</div>
</div>
</div>
<?php
}
?>
</div>
Never mind the pictures, they are all the same at the moment.
The css of this part is as follows:
#recent-works .col-xs-12.col-sm-4.col-md-3{
padding: 0;
}
.recent-work-wrap {
position: relative;
}
.recent-work-wrap img{
width: 100%;
}
.recent-work-wrap .recent-work-inner{
top: 0;
background: transparent;
opacity: .8;
width: 100%;
border-radius: 0;
margin-bottom: 0;
}
.recent-work-wrap .recent-work-inner h3{
margin: 10px 0;
}
.recent-work-wrap .recent-work-inner h3 a{
font-size: 24px;
color: #fff;
}
.recent-work-wrap .overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
border-radius: 0;
background: #BDBDBD;
color: #fff;
vertical-align: middle;
-webkit-transition: opacity 500ms;
-moz-transition: opacity 500ms;
-o-transition: opacity 500ms;
transition: opacity 500ms;
padding: 30px;
}
.recent-work-wrap .overlay .preview {
bottom: 0;
display: inline-block;
height: 35px;
line-height: 35px;
border-radius: 0;
background: transparent;
text-align: center;
color: #fff;
}
.recent-work-wrap:hover .overlay {
opacity: 1;
}
The result of the code looks like this:
Why are the columns stacked up? And how can I solve this?

Answer 1

HTML:
<img class="img-responsive inline-block" src="images/portfolio/recent/item1.png" alt="">
Add the below markup to your CSS:
.inline-block{ display: inline-block;}

Answer 2

You can try this CSS property to image:
img{
display: inline-block;
float:left;
}