html - create list that float elements to right on reaching bottom of div (and div width adjust automatic) -

html - create list that float elements to right on reaching bottom of div (and div width adjust automatic) -

hopefully pretty simple couldn't work out yet.

i have container , list construction so:

<aside id="container"> <ul> <li> <li> etc... </ul> </aside>

what need have li elements list vertically now, 1 time arrive @ bottom of aside container element (height: 500px example) next li elements float right. how do (without tables!)? basically, endresult need is: have list of titles fall vertically , float right (the container horizontal), creating new column. , aside container div adjust width automatically.

i'll uploading new titles every on, need capable of growing horizontally.

all help welcome! thanks!

the problem you'll have here want list read top bottom , grow horizontally. utilize column-count css property mean using fixed number of columns wouldn't satisfy needs. i'm not sure there pure css method accomplish utilize simple javascript determine number of columns you'll need (total number of items / number of items fit 500px) , dynamically add\amend column-count css property.

note column-count property won't work ie versions < 10.

here's simple working example.

html containers