Fixing a column width in Zurb Foundation 3? - css

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:
<div class="row">
<div class="four columns ad push-eight">
<img src="http://placehold.it/300x300">
</div>
<div class="eight columns pull-four">
<h1>Bacon ipsum dolor sit amet tri-tip shankle chicken leberkas beef pork</h1>
</div>

Answer 1

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;}
}

Answer 2

When I needed to fix the width of my sidebar I ended up doing it with calc(). I wanted to have my sidebar below the main content on smaller devices and this way it was really easy.
My layout in haml
.row
.content.column.large-9
= yield
.sidebar.column.large-3
= render 'sidebar'
Styles
.sidebar{
width: 100%;
}
.content {
width: 100%;
}
#media #{$small} {
.sidebar {
width: 225px !important;
}
.content {
width: 70.2% !important; /* Fallback for older browsers */
width: calc(100% - 240px) !important;
}
}
The media query parameter $small is really confusing as it actually means "larger than small".