Strange iPad portrait and landscape view issue - html

Question

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.

Answer 1

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.