Jquery mobile footer doesn't resize to screen size

Question

I've got a problem with the footer in my jquery mobile page. There's always some space between the edges of the screen and the edges of the footer. In the other pages of my site, that space isn't there. So, anyone a idea what I can do about this? There's an iframe in the middle of the footer, but on the other pages, it's there too. Here's the code of the footer, anyone an idea why this is happening?

document.write (
<div data-role="footer"> 
<div align="center"><iframe width="320" height="50" frameborder="0" src="http://scoutline.3owl.com/test/rss/ads.html" scrolling="no"></iframe></div>
</div>

(in the real code there is an ' before every line and a '+ after every line, but stack overflow won't show my code when it's there.)

Thanks in advance, Jan Thiemen

Answer 1

I went to http://scoutline.3owl.com/test/rss/ads.html and from there found the source code for your page.

You're currently placing your footer within the content, that is why it's constrained to 90% of the width. Add another in front of it and you're good to go. (Yes, I do mean add since I can't find the closing div of the data-role=page).

I made a jsfiddle http://jsfiddle.net/YeBGS/