Content wrapping for lists using CSS or HTML or JavaScript?

Question

I am curious how I would get content to wrap around the elements like at the link below. The flex-wrap feature does get them to wrap around somewhat but it leaves a lot of white space as demonstrated in the second link.

http://saijogeorge.com/website-builders/

My source code and demo here

Answer 1

Unfortunately this doesn't seem to possible to solve with just CSS. Saijo George solves the problem by using inline absolute positioning, controlled through JavaScript.

For example, #bot-builders has a default inline style of: position: absolute; top: 130px; left: 400px; position: absolute; top: 130px; left: 400px; . These variables change whenever the browser is resized.

Adding the above to your example solves the problem, though naturally messes up the display at different widths. You could create a bunch of media queries to change every single list's values at multiple widths, though that would seem a bit overkill. Ultimately, you may need to contact Saijo George to find out exactly what JavaScript they are using to control the responsiveness.

Hope this helps!