1

I have spent a while with solving the following problem:

I would love to wrap the "infinite" number of floated div by four in column (and different for smaller media width) by adding clear:left to the each fifth element;

I made a fiddle where it works just fine. https://jsfiddle.net/kybernaut/zqnkxa3h/1/

But no matter whatever I do, in the real situation the layout gets broken (two last items are wrongly wrapped, when I set it back to :nth-child(4n+1), it breaks a different way completely. Is there anything I'm missing on that page? I have no idea how to fix it myself. The class is .bundled_product

Karolína Vyskočilová
  • 1,305
  • 1
  • 18
  • 29

2 Answers2

2

All of your .component-data containers have a first child .kbnt-items and a second child .min_max_items. The last .component-data container is missing the .kbnt-items child, that's why the third child of this container is the second .bundled_product here.

<div class="component_data">
  <div class="kbnt-items">0/1</div> <!-- missing in your last component_data... -->
  <div class="min_max_items"></div>
  <div class="bundled_prodct">...</div> 
  <div class="bundled_prodct">...</div> <!-- ... that's why this one is the '4n+3' element -->
</div>
Marvin
  • 9,164
  • 3
  • 26
  • 44
  • Oh, I see, thanks a lot for pointing it out. I thought should counts only `.bundled_product` class not every child within the class. How I would do that correctly? The `.kbnt-items` and `.min_max_items` are optional (and based on user settings). – Karolína Vyskočilová Mar 18 '17 at 10:49
  • 1
    As [there is no nth-of-class selector](http://stackoverflow.com/a/10931957/3162554) and [nth-of-type](https://developer.mozilla.org/de/docs/Web/CSS/:nth-of-type) won't help here either as `.kbnt-items` and `.min_max_items` are of the same type as `.bundled_product` - you could wrap your `.bundled_product`s in another div so that you can use the nth-child-selector (without the `+` part, just 4n). The products will then be the only childs of that newly created container and you don't have to care about different numbers of children. – Marvin Mar 18 '17 at 10:57
  • Here is a [JSFiddle](https://jsfiddle.net/2raquk6x/) demonstrating the wrapper idea. – Marvin Mar 18 '17 at 11:04
1

Your last item has the class ..bundled_product:nth-child(4n+3) which contains clear: left, that's why it is put in a new line.

Johannes
  • 64,305
  • 18
  • 73
  • 130