iPhone container width issue

[rjmccollam]

I have seen this before on other sites, and am curious as to how to fix this on a site I am developing. You can see from this image (http://cl.ly/1Q1f2P0c1g1m2i2U3h0E) what is happening here. I believe that I know the issue, but I do not know how to fix it.

The issue:

This site has a container div of 978px wrapped around the content. Within that container there is an absolutely positioned div (the burst graphic behind the video player) that is pushed outside of the container to the right. Mobile Safari is taking the container width and adding the amount of pixels the absolutely positioned div is sticking out of the container and using that as the total width of the site.

Any idea on how I can fix this? This is a link to the site – http://coke.fraternityadv.com/secure/

[Senff]

Yup, Mobile Safari considers that part of the content that is actually pushed outside the container as proper content, and therefore shows it as if the site is more than that designated 978 pixels.

You’ll have to use a method where those bottles (that you see behind the video player) are not considered content, but just styling. I believe the best way to do that is to keep everything within that 978 pixel space (not have anything “escape” that container), and make those bottles a background image of the BODY tag.

Try this by setting the container to overflow:hidden and see if that at least centers the site better. If it does, then you can put those bottles (and that sunshiny splash) as the background image (of this particular page at least).

Another option would be to also have some (empty) content escape the LEFT side of the container, so that the balance is more symmetrical.

[Vermaas]

The background option is the most usefull for now, i think. On the other had, it might be a tuff one to get it in the right position, because you use several width’s on different pages.

Don’t make it yourself to hard. Use one “main” width.

Btw: why don’t you use any floating for header, home-text etc? On that way you won’t have to use the empty (google hates it!) clear div. And it makes positioning the div way easier.

[Author]

Posts