Turns out this is a FAQ. Googling for response layout banner ad (w/o the bootstrap qualifier) gave plenty of help.
No canonical answer to how to handle div's with fixed dimension in responsive layout. However, some useful discussion: http://www.webdesignshock.com/responsive-web-design/ Nice in-depth writeup (e.g. covers data-fullsrc.) http://www.google.com/support/forum/p/AdSense/thread?tid=2999b34997ccfcae&hl=en Ways to get banned. (e.g. display=None in @media. heh.) http://blog.buysellads.com/2012/01/adaptive-web-design-advertising/ http://www.ravelrumba.com/blog/responsive-ad-demos/ http://www.markboulton.co.uk/journal/comments/responsive-advertising Boston Globe has incorporated an MMU ad unit. They’ve done this by fixing the width of that column and have the ad unit occupy that space as the viewport is reduced down to a single column. I'd still be interested to hear how folks here handled images (or any div) that can't be resized. Thanks, m On Mon, Feb 13, 2012 at 10:48 AM, mbucc <[email protected]> wrote: > Hi, > > I just started playing around with bootstrap last night, and it's > great. But I got stuck quickly when trying to lay out a page header. > > The header has a Google banner ad and some content that displays to > the right of the banner ad. So, I the following structure with the > 940px fixed layout: > > <div class="row"> > <div class="span8"> > banner > </div> > <div class="span4"> > ... > </div> > </div> > > When I resize the browser window to make it narrow, the two divs > overlap before the right one responds to the narrower width by > "popping" under the banner. > > I think what happens is that as the browser window narrows, a single > column get's smaller and smaller, and that at some point eight columns > is not wide enough to hold the banner and it overlaps with the right > div. > > I'd like: > > (1) the right content to pop under before it overlaps and > (2) not have a large space between the two divs in the "normal" 940px > width. > > How can I do this? > > Thanks, > > m
