0

in this glitch hosted website - https://project-mahvonia.glitch.me/ (it's in Hebrew) you can see i have different "calculators" (those are the different white rectangles), and you can see in this image - screenshot from the website

the red arrows show the different heights of the "calculators", the orange arrow shows GOOD spacing between the "calculators", the pink arrow shows BAD spacing between the "calculators".

So how do I make those divs which have display: inline-block; property float to the top to fill up the space? (so all the spacing between the "calculators" looks like the orange arrow)

Apophis
  • 31
  • 5
  • Is there a relation between the top and bottom boxes in a column? Meaning do the columns need to stay this way or are you simply wanting to maintain consistent spacing when they wrap around like masonry style used on pinterest? – cyberwombat Aug 10 '20 at 02:27
  • @cyberwombat yea the columns should be as it now just whenever a box can float higher it should do it. – Apophis Aug 10 '20 at 02:31

1 Answers1

0

Well you can place things in floating columns and just manage margin of the calculators - would that work for you?

<!DOCTYPE html>
  <head>
    <style>
      .col {
        float: left;
        margin: 0 5px
      }
      .calculator {
        width: 200px;
        height: 200px;
        background-color:red;
        margin-bottom:50px;
      }
    </style>
  </head>
  <body>
    <div class="col">
      <div class="calculator" style="height:300px;"></div>
      <div class="calculator"></div>
    </div>
    <div class="col">
      <div class="calculator"></div>
      <div class="calculator"></div>
    </div>
  </body>
</html>
cyberwombat
  • 38,105
  • 35
  • 175
  • 251
  • unfortunately, this answer is for a website with fixed amount of columns, but my website is changing the number of columns based on the screen size, so it can fit better in phones, so this solution is good but not for my website... – Apophis Aug 10 '20 at 02:44
  • The columns will stack on mobile. So the calculators in a column need to stay vertically aligned then this answer will work for any screen size maintaining all the calculators for a column together. – cyberwombat Aug 10 '20 at 03:31