CODEWITHSUNDEEP
htmlcsscss-float
brii
brii

Reputation: 23

Moving Elements to a New Line on Browser Resize

I'm looking for a solution that will dynamically move elements depending on the size of the browser.

Example:

I will use "X" as example of an element

If one user is viewing on a resolution similar to a mac, they will see

X X X X X X - The maximum amount of LIs / DIVs

If the browser is resized to half the size, they will see

X X X - Half the amount of LIs / DIVs

What would be the best way of going about this to try and replicate? an working example is seen here : http://www.therugcompany.com/gb/collection.html

Thanks for Looking!

Upvotes: 1

Views: 7873

Answers (1)

Jay Dansand
Jay Dansand

Reputation: 779

If the LIs/DIVs are floated elements, they'll naturally fall down to the next line as the width of their container gets smaller.

W3Schools has a nice example of exactly what you are describing, here: http://www.w3schools.com/css/tryit.asp?filename=trycss_float_elements

That's from the main CSS Float topic page, here: http://www.w3schools.com/css/css_float.asp

Upvotes: 3

Related Questions