Horizontal Scrolling Banner Isn't Working - html

Question

I have created a website in which an entire page scrolls left and right instead of up and down using only HTML and CSS. I have taken that code for another website to create a banner type navigation thing like Polygon's website when the page is viewed for an iPhone or another device with a small screen like that, however I can't understand why in this case the code isn't working, I have spent ages on it and I just cant see the problem. Maybe some fresh pair of eyes will help, here is the code I'm using.
CSS:
html {
height: 100%;
overflow-x:hidden;
}
body {
height: 100%;
}
#cover_menu {
width: 2560px;
height: 480px;
overflow: hidden;
}
#cover_tile {
width: 640px;
height: 480px;
float: left;
}
#cover_link {
width: 100%;
height: 50%;
}
HTML:
<div id="cover_menu">
<div id="cover_tile">
<div id="cover_link" class="link_1">hello</div>
<div id="cover_link" class="link_2">hello</div>
</div>
<div id="cover_tile">
<div id="cover_link" class="link_3">hello</div>
<div id="cover_link" class="link_4">hello</div>
</div>
<div id="cover_tile">
<div id="cover_link" class="link_5">hello</div>
<div id="cover_link" class="link_6">hello</div>
</div>
<div id="cover_tile">
<div id="cover_link" class="link_7">hello</div>
<div id="cover_link" class="link_8">hello</div>
</div>
Thanks in advance, Matt