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:
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.>
Scaryguy's is answer pretty much correct. But the outer div should have overflow: hidden
for the conteiner to work properly.
See this example: http://jsfiddle.net/QCf4U/
The code in the example has all the red boxes with float: left
. And there are 4 blue divs that contain (the first 2 blue divs are stuck together on the top):
clear: left
, and 5 red divs insideoverflow: hidden
, and 5 red divs insideNotice that without clear nor float nor overflow: hidden
on the container, your red divs on container 1 and 2 will be next to each other (not following the container).
You can see that for the container blue div to get its correct vertical size you have to use overflow: hidden
(or maybe float
there too).
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With