Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Dynamic rows of divs (boxes) using CSS?

Tags:

html

css

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:

alt text

like image 578
Chris Avatar asked Sep 11 '10 16:09

Chris


2 Answers

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.>

like image 122
scaryguy Avatar answered Nov 06 '22 07:11

scaryguy


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/

cssexample

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):

  1. No clear and no float, and has 3 red divs inside
  2. No clear and no float, and has 3 red divs inside
  3. Has clear: left, and 5 red divs inside
  4. Has overflow: hidden, and 5 red divs inside

Notice 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).

like image 43
Mariano Desanze Avatar answered Nov 06 '22 07:11

Mariano Desanze