Horizontal Width Issue For Ipad

I am building a mobile optimized version of a website and testing different mobile devices but I can't seem to figure out how to get this page to not expand past the horizontal width of the ipad.

http://www.iirusa.com/upload/wysiwyg/2011-P-Div/P1656/Mobile_web/home.html

That is the page I am building. Just to clarify, on the Ipad the vertical view fits fine. But on the horizontal view it expands past the width and a user has to pinch it in order to view the full page. I am using a width container of 100% which I am assuming is the problem, but how would I make the horizontal view smaller without affecting th开发者_StackOverflow中文版e width of the vertical view?

Thanks in advance for the help!!

@SERIK; first define viewport in your in meta tag. like this.

<meta name="viewport" content="user-scalable=no, width=device-width" />

For more information must saw these link's http://matthewjamestaylor.com/blog/ipad-layout-with-landscape-portrait-modes , http://www.htmlgoodies.com/beyond/webmaster/toolbox/article.php/3889591/Detect-and-Set-the-iPhone--iPads-Viewport-Orientation-Using-JavaScript-CSS-and-Meta-Tags.htm , http://thomasmaier.me/blog/2010/03/04/howto-css-for-the-ipad/

Have you tried using the viewport metatag for mobile safari?

You can simply add this to your page template html:

<meta name = "viewport" content = "width = device-width">

Check more details in Safari Developer Library