Menu icon Foundation
Column Centering Confusion

Using mixins, I've styled two divs nested within a container to be center aligned:

<div class="container">
  <div class="myDiv-one">...</div>
  <div class="myDiv-two">...</div>
</div>

 

.container {@include grid-row;}
.myDiv-one,
.myDiv-two {
  @include grid-column(11,0);
  @include grid-column-position(center);
}

The second div floats right, ignoring the grid-column-position mixin, based on the following CSS:

..myDiv-two:last-child:not(:first-child) {
    float: right;
}

I haven't imported the grid component into app.scss, so I assume this comes from styles associated to the grid-row mixin. Nonetheless, I'm confused as to why this is happening?

BTW, I tried applying @include grid-column-end to the second nested div, but that produced float:left.

Help?

gridgrid mixins

Using mixins, I've styled two divs nested within a container to be center aligned:

<div class="container">
  <div class="myDiv-one">...</div>
  <div class="myDiv-two">...</div>
</div>

 

.container {@include grid-row;}
.myDiv-one,
.myDiv-two {
  @include grid-column(11,0);
  @include grid-column-position(center);
}

The second div floats right, ignoring the grid-column-position mixin, based on the following CSS:

..myDiv-two:last-child:not(:first-child) {
    float: right;
}

I haven't imported the grid component into app.scss, so I assume this comes from styles associated to the grid-row mixin. Nonetheless, I'm confused as to why this is happening?

BTW, I tried applying @include grid-column-end to the second nested div, but that produced float:left.

Help?

Rafi Benkual about 3 years ago

It might help to know what layout you are trying to achieve. 

From what I see in your code, it seems like you are defining both div's in the container as 11 columns. This would cause them to stack.

If I use one column per row, it works as expected:

<div class="container">
  <div class="myDiv-one">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus, architecto rerum, id odit ut expedita ea sunt, perferendis eveniet voluptate sint atque quod aliquam odio sit, mollitia consectetur alias. Assumenda.
  </div>
</div>
<div class="container">
  <div class="myDiv-two">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis consequuntur incidunt atque, quia eius in, nostrum odit hic sapiente accusantium molestias deleniti amet, odio, quam nobis sunt alias aspernatur explicabo.    </div>
</div>

It seems if you create the scenario where the second column stacks and it is less than 12 columns, it is floated right. If you add the .end class or mixin then it floats back to the left.

Wesley Picotte about 3 years ago

Hi @Rafi Benkual - specifically, I'm trying to stack the two columns, center-aligned (as you see in the code), for medium-down widths, and for everything else have left / right (50%) columns.

I didn't include the media queries here because I was confused when .center didn't 'work', and .end didn't help (I'm still getting used to the mixins).

I should have done so in the first place -- nevertheless, two columns nested in the same row is what I need, but must manually cancel the float on the last child using the rules shown as-is. 

With this additional context, are you aware of a different approach using mixins that precludes the need to manually cancel the last-child float?

Thanks