Strange iPad portrait and landscape view issue

I don't have iPad, so i can't test properly, online simulators aren't reliable enough, it seems.

Problem: (client's words)

The site loads perfectly in both portrait and landscape. But, if I view in landscape, and then rotate the screen, the portrait view is off to the left as before, but not quite as bad.

Image: CENSORED NSFW IMAGE
Link: http://bybyweb.com/london (Warning: NSFW content)

Note: it happens in all browsers, except mercury.

I have used media queries for 'portrait' view, since iPad in landscape mode (1024px) should show desktop version properly.

CSS:

@media screen and (min-width : 767px) and (max-width: 1023px) { 
    #date h1 {
            font-size:48px;
        line-height:88px;
        margin:-3px 0 0 340px;
        padding:0;
        color:#fff;
        letter-spacing:0px;
        word-spacing:0px;
        font-weight:bold;
    }
    #joinform {
        float: right;
        width: 525px;
        height: 500px;
        left: 300px;
        position: absolute;
        z-index: 7;
        padding-left: 5px;
        padding-top: 6px;
        overflow:hidden;
    }
    #member-login {
        position:absolute;
        left:470px;
        top:15px;
    }
    #members-signup {
        width:180px;
    }

    #members-area h2 {
        line-height:30px;
        font-size:30px;
        margin:0 0 0 15px;
        padding:65px 0 0 0;
        font-weight:bold;
        color: #454545;
    }


    #members-list {
        width:500px;
        height:220px;
        float:left;
        overflow:hidden;

    }
    #members-list h3 {
        line-height:20px;
        font-size:20px;
        margin:0px;
        padding:25px 0 5px 0px;
        font-weight:400;
    }
    #content {
        width:100%;
    }
    #about-area {
        width:100%;
    }

    #about-area p{
        width:90%;

    }

    #about-area h3 br{
        display:none;
    }

    #about-area p br {
        display:none;
    }

    #join-img-holder {
        width:100%;
    }
    #members-area {
        width:100%;
    }
    #logo-area {
        width:100%;
    }
    #footer-content {
        width:100%;
    }
}

Complete page css link: http://bybyweb.com/london/css/style.css

What i am doing wrong?

P.S. Fix with position:relative didn't solved my problem, there is still a lot of empty space in 'portrait' view?! I would appreciate help. It is strange that issue occurs after orientation change.

Solution

And answer is: problem was width of one element - #joinform. I have decreased width to 463px, and now all works fine. It seems that overflow: hidden didn't work: iPad tend to 'show' hidden content, and to 'push' elements on page, if needed.

So, sum of widths shouldn't be more than 100% in any case, iPad doesn't tolerate it.

Also, i got good advice related to iPad testing - Google Chrome emulator (included in latest version) is very reliable (errors was visible in emulation).

I hope this will help to someone.