I'm developing a website and it should list some specifications of a system. There are several lists of varied heights. Problem: I use float: left in all lists. I hoped the lists would fit automatically, with the right as far as the left. But as expected, this did not happen. Here are some photos for better understanding:
Always provide the code needed to solve the problem. The workaround is to use the display: inline-block property, so all lists would line up side by side. Along with this, you can also use the vertical-align property to control how the placement of the lists will behave. Among many values, what should best fit your need is middle , which centrally positions an element in relation to the Y axis.
Using the code that you provided in your response, I gave an example in JSFiddle: link . On fullscreen to see better: link
