Fixing a column width in Zurb Foundation 3?

Question

I have a layout where one of my columns holds an ad. See image 1: The ad image is in a four-column div. The ad is an MREC which is 300px wide. However, on the iPad, since the columns reduce, the ad goes down to 236px which is a no-no. See image 2 below, of course it looks the same here but it is smaller: I need it to stay at 300px. Also, sometimes the ad server may serve an iframe-based ad (also 300px). So that div needs to not shrink width. I tried adding a class to that did and setting css to min-width:300px, but then on the iPad it sticks out the right edge; the other div does not shrink accordingly enough. See image 3: So, how do I ensure the divs with my ads are not re-sized on the iPad? EDIT: Also, the problem seems compounded when I reverse the column order with push-pull. I am doing this since I need the ad to come first on the phone but second on other platforms: ```

Accepted Answer

In order to get this to work, I had to step outside of Foundation a bit. Here's what you'll need.

Example: http://cdpn.io/Kypen

Explained: I created an ad wrapper `.ad` and a `.container` element.

The `.ad` is 300px wide and floated to the right; while the `.container` element is given a 320px wide margin. Since Foundation is using border-box sizing the margin is factored in to the width of the overall `.container` element. As a result, the `.ad` sits inside the "false margin" (the 20 extra px is for white space). This is an old trick and it works inside Foundation's .row & .column elements just fine, in addition it doesn't affect nested rows from being created either.

I also added a media query, use can use this to change the behavior at low resolution.

```
.ad
{
  float:right;
  width:300px;
}
.container
{
  position:relative;
  margin-right:320px;
}
@media only screen and (max-width: 767px)
  {
  .ad
  {float:none;}
  .container
  {margin:0;}
}
```

Fixing a column width in Zurb Foundation 3?

Solution

Problem