do a variable number of divs positioned side by side at the same height with HTML / CSS (reactive design)?

advertisements

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.


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.