CODEWITHSUNDEEP
htmlcss
Jurgens Krause
Jurgens Krause

Reputation: 21

How to make divs that automatically wrap to the next row

I am creating HTML voucher templates for a hotspot system and have a need for the following.

I want to print two vouchers side by side and then wrap to the the next row for the next two vouchers, the catch is that the system generating the code does not give me the freedom to assign different classes to each voucher , so the css needs to handle it automatically. Any ideas on how to do this?

Upvotes: 0

Views: 6442

Answers (1)

nixkuroi
nixkuroi

Reputation: 2279

Just set a static height and width for your vouchers and display:inline-block. They will wrap based on the size of themselves relative to their container. 

#container {
  display: block;
  width: 250px;
  position: relative;
  border: solid 1px green;
}
.voucher {
  display: inline-block;
  position: relative;
  width: 110px;
  height: 110px;
  margin: 3px;
  border: solid 1px red;
}
<html>

<body>
  <div id="container">
    <div class="voucher">hi</div>
    <div class="voucher">hi</div>
    <div class="voucher">hi</div>
    <div class="voucher">hi</div>
    <div class="voucher">hi</div>
    <div class="voucher">hi</div>
    <div class="voucher">hi</div>
    <div class="voucher">hi</div>
    <div class="voucher">hi</div>
    <div class="voucher">hi</div>

  </div>
</body>

</html>

Upvotes: 5

Related Questions