Bourbon/Neat: Reset margin and let nested divs span the whole width

christophe picture christophe · Feb 20, 2014 · Viewed 9.6k times · Source

I am new to Bourbon/Neat. I have a question concerning nesting: I want the red boxes fill the whole width, without a gutter between them. When using "@include omega" on them, the first box removes its margin-right, but the right box has still the margin and doesn't adjust its width.

Can u tell me how I can make them span the whole parent box without any margin between them?

Here's a demo: http://wuergeengel.net.dd13736.kasserver.com/

Here's my markup:

<div class="container">
  <div class="box box-left"></div>
  <div class="box box-right">
    <div class="box-red-left nested"></div>
    <div class="box-red-right nested"></div>
  </div>
</div>

Here are my styles:

.container
{
  @include outer-container;
}

.box
{
  border: 1px solid black;
  height: 500px;
}

.box-left
{
  @extend .box;
  @include span-columns(4);
}

.box-right
{
  @extend .box;
  @include span-columns(8);

  .nested
  {
    border: 1px solid red;
    height: 400px;


    &.box-red-left
    {
      @extend .nested;
      @include span-columns(3 of 8);
      @include omega;
    }

    &.box-red-right
    {
      @extend .nested;
      @include span-columns(5 of 8);
      @include omega;
    }
  }
}

Answer

Tim Abbott picture Tim Abbott · Aug 8, 2014

Or this:

@include span-columns(5 of 8, block-collapse)

See: http://neat.bourbon.io/docs/#span-columns