title: DIVs float in a non-linear way
body: <p>have a css float problem that i'm not sure how to fix or best way to fix and can't seem to find anything in searches. I have a variable amount of items to show inside a div, using a css float left on all the inner boxes (1, 2, and 3 in pic) but the float breaks with variable lines of text. the developer outlines show that because box 1 is larger that box 2, box 3 doesn't float flush left like box 1 which screws up the flow. how do i keep the vertical height of box 1 and box 2 but make box 3 float left where it should be? Doing a float: right; does the same thing but just pushes 3 to the left is div 2 is larger than div 1</p>
  
  <p>This is just an example, there could be a variable number of rows and columns so just doing an Nth div css rule won't work. (the containing div is a variable width based on a few conditions including responsive design)</p>
  
  <p>Almost like i have to have a variable buffer at the bottom of each item in a row to match the height of the tallest one. I also don't want to use a min-height as on rows where the divs are the same height will result in extra white space where there shouldn't be. How would i get the tallest element in a row if the number of columns are variable?</p>
  
  <p>A possible solution is to use the empty clearing div trick but again how do I get the number of divs in a row when columns are variable? I tried to force a nth child::after thing in the example but it didn't work</p>
  
  <pre><code>.item:nth-child(2)::after {
      clear: both;
  }
  </code></pre>
  
  <p>Search didn't show anything that works so if anyone has a post that does please let me know.</p>
  
  <p>also have to stick with CSS2 if at all possible due to a bunch of users using older browsers that don't use CSS3</p>
  
  <p><a href="https://i.stack.imgur.com/blgEP.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/blgEP.jpg" alt="float problem"></a></p>