how to auto right/left float

Question

I have this page that is responsible for showing orders, these orders are generated dynamically using flask once a customer place an order.

Each order is supposed to show additional information once clicked. Now, if the order that is being expanded is on the left, the flow of the other orders goes smoothly well.

However, if the order that is being clicked(expanded) is on the right, weird things happens...

Does anybody knows why is this happening and if there is any way around it? here is the code:

<!-- An Order -->
<div class="an-order">
  <img src="./delivery-truck.png">
  <div>
    <h5 class="">#232451</h5>
  </div>
  <h6>total: $000.00</h6>
  <div class="order-footer">
    <span>expand me</span>
    <span>!</span>
    <hr class="line">
    <!-- Additional Information -->
    <div class="additional-info">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 
         eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim 
         ad minim 
         veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip 
         ex ea 
         commodo consequat. Duis aute irure dolor in reprehenderit in 
         voluptate velit 
         esse cillum dolore eu fugiat nulla pariatur. Excepteur sint 
         occaecat 
         cupidatat non proident, sunt in culpa qui officia deserunt mollit 
         anim id 
         est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing 
         elit, qui 
         officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit 
         amet, 
         consectetur adipisicing elit, sed do eiusmod tempor incididunt ut 
         labore et 
         dolore magna aliqua. Ut enim ad minim veniam, quis nostrud 
         exercitation 
         ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute 
         irure 
         dolor in reprehenderit in voluptate velit esse cillum dolore eu 
         fugiat nulla 
         pariatur. Excepteur sint occaecat cupidatat non proident, sunt in 
         culpa qui 
         officia deserunt mollit anim id est laborum.</p>
    </div><!-- /.Additional Information -->
  </div>
</div><!-- /.An Order -->
<script src="./jquery-3.3.1.min.js"></script>
<script>
  $( document ).ready(function() {
    // All orders' additional information must be toggled at first
    $(".additional-info").slideToggle(0);
    // Each order's additional information will show on click based on its 
    // $this value!
    $(".an-order").on("click", function () {
      var additionalInfo = $(this)["0"].children[3].childNodes[9]
      $(additionalInfo).slideToggle(1000);
    });
  });
</script>

with the following styling:

.an-order {
  padding:10px;
  margin:10px;
  width: 286px;
  float: left;

  background:#f1f1f1;
  color:#666;
  border: 2px solid black;
}

.order-footer {
  padding: 0.75rem .75rem;
  display: inline-block;
  width: 90%;

  background-color: rgba(0, 0, 0, 0.05);
  border-top: 1px solid rgba(0, 0, 0, 0.125);
}

there is no solution for this using css....[**See this**](https://stackoverflow.com/questions/5234749/css-floating-divs-at-variable-heights) — Bhuwan, Feb 24 '18 at 08:43
thank you @Bhuwan , indeed JQuery masonry is what i need. you should include this in an answer to benefit others. not many of us know about this library existence. — Belle, Feb 24 '18 at 10:16

score 0 · Accepted Answer · answered Feb 24 '18 at 10:43

The problem is here the height and float of the div which are causing the issues. And there is no solution of this issue using only css.

However another approach is you can use column-count for this kind of layout(You will need to change the HTML markup for this)...

...Or another way to use jQuery libraries like

how to auto right/left float

1 Answers1