make variable number of divs positioned side by side of equal height with HTML/CSS (responsive design)?

Question

Browser support: I need this to work with IE8+. CSS3 + polyfill solution accepted, but CSS only solution even better.

I have a series of divs positioned side-by-side.

I want their height to be equal to the heighest div in the "row".

The key here is that the number of divs next to another varies (from 4 by row to 3 by row).

This is because this is a responsive design, in which we set the width of a product to 25% by default, but 33% when in smaller screen size.

See the code below, and the jsfiddle also http://jsfiddle.net/gLk7u/

<div id="wrapper">
    <div class="item">item 1<br>more text</div>
    <div class="item">item 2</div>
    <div class="item">item 3</div>
    <div class="item">item 4</div>
    <div class="item">item 5</div>
    <div class="item">item 6</div>
    <div class="item">item 7</div>
    <div class="item">item 8</div>
</div>


.item {
    width: 25%;
    margin-top: 5px;
    float: left;
    background-color: red;
}

@media (max-width: 640px){
    .item {
        width: 33%;
    }
}

I found that display: table along with the other display: table-cell & display: table-row could be good but in only the case of a static number of divs per row (so not good for my case), since you need to add a wrapping div (acting as a row). But maybe I missed something?

See How do I achieve equal height divs (positioned side by side) with HTML / CSS ? and also HTML/CSS set div to height of sibling

Finally I found that flexbox might answer my specs. And indeed after playing around I made it work. The only thing is that flexbox is not supported by older browser (support by IE10+, chrome 20+, safari 3.1+, firefox 2+) read more about support http://css-tricks.com/snippets/css/a-guide-to-flexbox#browser-support so I probably would need to add the flexie polyfill, https://github.com/doctyper/flexie, to support this on older browser. I hear you will say "but smaller screen sizes are on modern device so a polyfill is not needed", but I want my website to still be able to run if you resize your window in IE8, IE9 or any other browser not supporting flexbox.

read more about flexbox http://css-tricks.com/snippets/css/a-guide-to-flexbox/

see the code using the flexbox model below & the jsfiddle also http://jsfiddle.net/4T2Tm/1/

<ul class="flex-container">
  <li class="flex-item">1 and 2 <br> and more</li>
  <li class="flex-item">2</li>
  <li class="flex-item">3</li>
  <li class="flex-item">4</li>
  <li class="flex-item">5</li>
  <li class="flex-item">6</li>
</ul>

.flex-container {
  padding: 0;
  margin: 0;
  list-style: none;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: row wrap;
}

.flex-item {
  background: tomato;
  width: 23%;
  margin: 10px 1% 0 1%;
  float: left;
  line-height: 150px;
  color: white;
  font-weight: bold;
  font-size: 3em;
  text-align: center;
}

@media (max-width: 640px){
  .flex-item {
    width: 33%;
  }
}

If you provide an answer, please provide the jsfiddle that comes with it. This is fairly complex stuff after all.

Answer 1

You've ruled out the only two possible ways to do what you're asking for with pure CSS (at this point in time -- any newer CSS techniques would not work in your desired browsers). So the answer is no, this cannot be done.

Answer 2

It's early days yet, and I have not tried to break this solution everywhere (or even looked at it on IE), but I have just come up with something that is working so far on the devices and browsers I have here.

The divs I want to wrap are all class="info"

In my CSS media queries I have:

    @media only screen and (min-width: 360px) and (max-width: 400px) {
        .info{ width: 50%; } /* 2 columns */
        .info:nth-child(2n+3) { clear:left; }
    }

    @media only screen and (min-width: 400px) and (max-width: 760px) {
        .info{ width: 33%; } /* 3 columns */
        .info:nth-child(3n+4) { clear:left; }
    }

    @media only screen and (min-width: 760px) and (max-width: 900px) {
        .info    { width: 25%; } /* 4 columns */
        .info:nth-child(4n+5) { clear:left; }
    }

    @media only screen and (min-width: 900px) and (max-width: 1600px) {
        .info    { width: 20%; } /* 5 columns */
        .info:nth-child(5n+6) { clear:left; }
    }

It must have both min and max width specified or the nth-child spills over into other screen sizes.

Answer 3

Specifying min-height value as the height of the most height div. Say, height of the first div for all others...

CSS only for IE8+

<!--[if IE 8]>
<style>...</style>
<![endif]-->