CODEWITHSUNDEEP
phpcsshtml
user1235720
user1235720

Reputation:

Showing multiple of the same <divs> on the same line

I am retrieving a list of products from a database and want to display them all in a rows of 3 columns not using a table though. So I want 3 divs to be displayed side by side. then below.

<div class="productindividualdisplay">
    <div class="productphoto">
        <img src="http://3.bp.blogspot.com/-_xP-UUa4D0c/UfAo1eYxURI/AAAAAAAAAT4/xsibNtxZceQ/s320/Books.jpg" alt="Smiley face" width="250" height="250"></p>
    </div>
    <div class="producttitle">
        <a href="productdisplay.php?name=<?echo $row['productid']?>"><?php echo $row['title'] ?></a>
    </div>
    <div class="productprice">
        <?php echo "<div id='productrrp'> &euro;" . $row['rrp'] . "</div>";
        if(is_null($offeringprice)) {
        echo "Not Available";
        } else {
                    echo "&euro;" .  $offeringprice['price']; 
                    }

                        ?>
        </div>

That is my code but it is just displaying the divs below each other. Is it possible so it fills up the row before starting another one?

Upvotes: 0

Views: 828

Answers (3)

user3088257
user3088257

Reputation:

Try using display: inline-block; on the divs's css.

Upvotes: 2

Milan and Friends
Milan and Friends

Reputation: 5610

Here's a FIDDLE

<div class="product-wrapper">

  <div class="productindividualdisplay">
    <div class="productphoto">
      <img src="http://3.bp.blogspot.com/-_xP-UUa4D0c/UfAo1eYxURI/AAAAAAAAAT4/xsibNtxZceQ/s320/Books.jpg" alt="Smiley face" width="250" height="250">
    </div>
    <div class="producttitle">
      <a href="productdisplay.php?name=<?echo $row['productid']?>">Product Title</a>
    </div>
    <div class="productprice">
      <span>$100</span>
    </div>
  </div>

  ...more products...

</div>


.product-wrapper {
  width: 960px;
  padding: 10px;
}
.productindividualdisplay {
  background: #fff;
  display: inline-block;
  width: 260px;
  margin: 5px 5px 15px 5px;
  padding: 10px;
  text-align: center;
  border: 1px solid #999;
  box-shadow: 0 5px 6px -3px #333;
}
.productphoto {
  width: 95%;
  margin: 10px auto;
  border-bottom: 1px solid #999;
}
.producttitle a {
  font-size: 18px;
  text-decoration: none;
}
.productprice {
  font-size: 18px;
  font-weight: 600;
}

Upvotes: 0

Nic Wortel
Nic Wortel

Reputation: 11423

A <div> is a block-level element. Block-level elements, like <h1>, <p>, <table> etc. will (by default) span the entire width of their parent elements, so they can't be positioned next to eachother.

You can change this behavior, however, using the following CSS rule:

div.column {
    display: inline-block;
}

This will render the <div>s as inline blocks.

Now you can give it a certain width so that three divs fit into a row. Do note that, when you leave whitespace between two <div> elements, there will be some visual whitespace. If you give all div's a width of 33.333333333%, the extra whitespace will cause their combined width to exceed 100%, so the third div will move to the next line.

You can simply prevent this by making sure there is no whitespace between the HTML elements:

<div class="column">
    <p>Some contents here</p>
</div><div class="column">
    <p>As you can see, no whitespace between the two div elements.</p>
</div>

Of course you can then use margins to control whitespace manually:

div.column {
    display: inline-block;
    width: 30%;
    margin-right: 3.33333333%;
    margin-bottom: 10px;
}

You might wanna take a look at this article: Using inline-block to Display a Product Grid View (it uses <li>s instead of <div>s, but the idea is essentially the same)

Upvotes: 1

Related Questions