1

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.

Community
  • 1
  • 1
Adriano
  • 19,463
  • 19
  • 103
  • 140
  • Have you looked into [Unsemantic](http://unsemantic.com)? – royhowie Mar 07 '14 at 14:44
  • At first glance, since display:table is out of the question, I don't see how this can be accomplished without javascript. There is no parent to base a height on, so to speak. A javascript solution would be fairly simple to implement though. An alternative, if you could get the 'rows' into a parent element for each row, is to either use a table-dsplay, or absolute positioning with top and bottom set to 0px. – Ted Mar 07 '14 at 14:50
  • @Ted: as mentioned in the question: you cannot use the concept of "row" since you'd have to move an item into the next row when the screen size decreases – Adriano Mar 07 '14 at 15:02
  • After coming back to this question 6 months later: `flexie.js` polyfill is actually NOT an option as it **only** supports a 2009 spec of the flexbox model (a limited number of properties), so using this polyfill does not work, see question for more details: `Is there any polyfill for current CSS Flexible Box Layout Module as per W3C CR` http://stackoverflow.com/questions/13934654/is-there-any-polyfill-for-current-css-flexible-box-layout-module-as-per-w3c-cr – Adriano Oct 03 '14 at 11:05

3 Answers3

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.

cimmanon
  • 67,211
  • 17
  • 165
  • 171
  • in my question I said "CSS3 + polyfill solution accepted", I suspect there might be some other solutions than the flexbox one (which seems the only solution so far), I am interested in comparing them. – Adriano Mar 07 '14 at 15:14
  • 1
    "Find me a library (polyfill)" is off-topic for SO. There's already a polyfill for Flexbox, which you already know about. – cimmanon Mar 07 '14 at 15:17
  • I am not asking for a polyfill - just a CSS3 solution that could also work on older browser if the relevant polyfill is used – Adriano Mar 07 '14 at 15:18
  • @cimmanon: I will most probably accept your answer in a couple of days if no answer is given before then – Adriano Mar 08 '14 at 12:29
0

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.

user3570401
  • 1
  • 1
  • Thanks for the suggestion, you probably forgot to mention that part of the CSS `.info { float: left; }`. I created a JSbin to test your code, & the divs that are on the same row do not get the same height as their "neighbouring divs". see [http://jsbin.com/woxinaga/1/edit?html,output](http://jsbin.com/woxinaga/1/edit?html,output) – Adriano Apr 25 '14 at 07:40
-2

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]-->
user3260487
  • 75
  • 10