Question

I have a variable number of boxes and I’d like to display as many as I can without forcing the viewer to scroll horizontally, there should also be a certain space in between them. This means that the boxes will have to move to the next or previous “row” if the browser is resized.

How do I achieve this using divs and CSS?

Thanks in advance 🙂

P.S: Enjoy my fine art skills:

Answer 1

All you need to do is setting the red divs width and/or height as “percentage” and setting your small-black divs float: left.

Example:

<div style="width: 80%"><div style="margin: 5px 0px 5px 10px; float: left;"></div> </div>

This will let your red div resize as soon as viewer resizes the window.>