Question

I am trying to create a website the is contained of 8 divs.
each div has a different height (same width).

The divs should be aligned one next to the other according the browser screen resolution in the following way:

 _________________________
|                         |
| ##### ##### ##### ##### |
| ##1## ##2## ##3## ##4## |
| #####       ##### ##### |
|       ##### ##### ##### |
| ##### ##6##       ##### |
| ##5## ##### ##7##       |
| #####             ##8## |
|_________________________|

The idea is that once a user has a smaller width, the divs will become 3 columns in the following way:

 ___________________
|                   |
| ##### ##### ##### |
| ##1## ##2## ##3## |
| #####       ##### |
|       ##### ##### |
| ##### ##5##       |  (There will be a scrollbar if needed)
| ##4## ##### ##### |
| #####       ##6## |
| ##### ##8## ##### |
| #####             |
|                   |
| ##7##             |
|___________________|

and if the user has a wider screen resolution, there will be 5 columns

 _______________________________
|                               |
| ##### ##### ##### ##### ##### |
| ##1## ##2## ##3## ##4## ##5## |
| #####       ##### ##### ##### |
|       ##7## ##### #####       |
| #####       #####             |
| ##6##                         |
| #####       ##8##             |
|_______________________________|

Please notice that the padding between the cells and the cols stays the same.

Also notice that the order of the divs should be kept the same, meaning if you count from left to right it should preserve the order of 1-8.

it should support IE8

I appreciate your assistance!

Answer 1

set your divs to use display: inline-block; this will ensure each row isn’t staggered.

then use css3 media queries to account for the various screen sizes.

tutorial about media queries. http://webdesignerwall.com/tutorials/css3-media-queries

DEMO: http://jsfiddle.net/tgdYq/ (resize the pane with the output)

as a quick example:

div {
    display: inline-block;
    width: 25%;
}

@media screen and (max-width: 420px) {
  div {
    width: 33%;
  }
}

@media screen and (min-width: 1200px) {
  div {
     width: 20%;
  }
}