Create a static div to hold an advertisement in a Compass Susy grid?

Question

I have to accomodate an MREC advertisement in my layout. The ad is 300pixels wide, and cannot resize as the fluid grid otherwise contracts.

Further, the ad needs to be the first item on smartphone, before the headline block. So, on the breakpoint I am setting it to omega to push it "after" the headline, as in this screenshot (gray rules just to make it easier to see).

The headline is 8 cols, the ad is 4. All is fine except on ipad the ad column and the ad reduces to under 300 pixels, which we are not allowed to do. So, how to keep everything fluid except the ad container?

Answer 1

This is not hard to do, but it means the grid up top won't exactly match the flexible grid below. I assume that isn't an issue. You have to use some functions to lay out these two elements, but everything else can be done exactly as it was before.

You can keep the ad flexible down to a minimum width:

.ad {
  @include span-columns(4 omega);
  min-width: 300px; // you can use any width you want.
}

Or you can make the ad completely static:

.ad {
  float: right;
  width: columns-width(4); // you can use any width you want.
}

The important part is that you must not set a column width on the headline.

You have a few other options. The simplest might be to set right margins and padding equal to the static ad size (plus gutter):

.headline {
  margin-right: columns-width(4) + $gutter-width;
}

Or, if you want that gutter to flex, try:

.headline {
  margin-right: columns-width(4);
  padding-right: gutter();
}

You can add clear: both; to the main content to make sure it clears the headline and ad.

If this approach doesn't work for you, try creating a new "formatting context" for the headline. One of the classic techniques is simply overflow: hidden;. Nicole Sullivan has a good blog post on how they do it for oocss, but it gets a bit more complex and you may not need all that.

UPDATE:

All these solutions require the ad coming first in the markup. The only way around that is if you know the height of the ad. In that case, you could position the ad absolutely rather than floating it, create space for it in the same way, and set a min-height on the headline (or row-container if you have one).