Problem with element stacking under other element

Hi,

I’m using the Bourbon Neat Sass library. I have a page that list pictures by 4 in a row:

I implemented this using the mixin’s:

@include span-columns(3 of 12);
@include omega(4n);

This works fine. However, when I added a div element above the pictures, for some reason the last picture from the first row moves to the second row.

Does anyone have a clue why this happens?

my repository is at: https://github.com/acandael/posplus

the page I’m talking about is source/people.html.erb and the Sass partial is source/stylesheets/partials/_people.scss

the prototype is live at: http://guarded-garden-4334.herokuapp.com/people.html

Thanks for your help,

Anthony

To understand the issue, you need to understand how @include omega(*arg); works — neat docs.
Omega generates selectors with the nth-child pseudo-selector. You can read more about them here: http://css-tricks.com/how-nth-child-works/

.member:nth-child( n ) is selecting nth child, regardless of the class, that are within the parent element.

In order to get this to work the way you wish, you need to wrap all div.member elements inside a wrapper element, so that the :nth-child(#) selector can accurately select the correct div.member elements.

<div class="members">
  <div class="member">...</div>
  <div class="member">...</div>
  ...
</div>
1 Like

Hi Phil,

This solved the issue, thanks a lot :smile:

Anthony