Can you have a grid using Susy that has 3 fluid and 1 static column?

Question

I'm new to "Susy" and am struggling with figuring out a few items.

I'm trying to create a row that has 3 fluid promo boxes (all gray in attached image) and 1 static box (which is a 300px x 250px big box ad - JPG file). I don't want to have the yellow box (ad) scale, but I do want the other 3 boxes to be fluid and maintain an equal margin to the right of the last gray box.

Currently as I start scaling the page the yellow box (image) drops down below the 3 fluid boxes. Is there any way for them to act as one row.

Thanks in advance

Answer 1

Yes. You need to start with two wrappers — one of the static block, and another around all three fluid blocks. Set a static width on one, and float it to the right. Don't float the flexible one, but give it a block formatting context with overflow: hidden. If that doesn't work for you (you need overflow for some reason), try adding a right margin the same size as your static sidebar (or slightly larger). Now the flexible wrapper can act as the context for your other elements. Something like this:

.ad {
  @include span(last 1 of 4 static);
}

.flex-container {
  @include post(1 of 4 static);

  .item {
    @include span(1 of 3);
  }
}

See a demo on Sassmeister.