small-screen fixed position spilling over content

[michaellunsford]

I've been working on this one for a while. It's a left-side ad that's supposed to stick when a user scrolls down. I've accomplished this by javascript changing the position:relative; to position:fixed; It works wonderfully on normal computer screens. However, if the screen is smaller than expected, say an iPhone, and the user "zooms" in to get a closer look at the content, that left-side ad spills over the content. This effect can be duplicated on a desktop by shrinking the window size and scrolling the page to the right.

 

I tried putting the ad inside another div with position:static; or position:absolute; without success. That position:fixed; just doesn't seem to want to stay inside any container. So, how do I tell it (preferrably via CSS) to stay left of the main content of the page? Or, must the scroll process also be relegated to javascript?

 

site is here: http://acadiana365.com

[iPixel]

I was unable to replicate this effect on any browser (ie/chrome/ff). However, i did see it on the iPhone 4s iOS6.

Have you considered maybe using css media queries and simply removing the position:fixed from the container only if device-width is smaller that ###px.

That way when you're on a small device such as an iPhone or Android phone, you'll loose the ability to have it follow you as you scroll down, but at least it wont overflow onto the regular content.

 

Media Queries Info : http://www.w3.org/TR/css3-mediaqueries/

 

 

Update: Ok i got the effect on ie/chrome/ff... i had to resize the window scroll right, than continue to scroll down before it popped into view. My idea for the solution still applies. Good Luck

[michaellunsford]

Well, media declaration for max-width works in the desktop browsers, but not on the iphone :-/