hor scroll not wrapping in firefox but fine on other browser

[pnmarques]

Hi

I have an horizontal scrolling website (an ongoing list of horizontally displayed items - it needs to be able of adding new content) that is wrapping up fine at the end of the last item both on Safari and Google Chrome. On Firefox however, it is not wrapping. I set a long width on the #main div, and then position: relative on the child elements. Anything I may be missing?

Here is the code that is defining the horizontal scroll:

CSS

#main {
min-height: 100%;
width: 20000px; /* I set this as a long width*/
}

.wrapper {
min-height: 100%;
min-width:100%;
}

#primary {
z-index:4;
}


#content {
list-style: none;
z-index: 3;
}

article {
font-family: 'arno', serif;
z-index:4;

}


.entry-content {
}


/* columns of text */ /*I have added POSITION:RELATIVE here and it is working on other browsers!*/

.columnshomepage_artduc {
width: 480px;
margin: 20px 70px 0 70px;
float:left;
position:relative;
height: 480px;
font-size:26px;
letter-spacing: 0.05em;
}

.columnshomepage_rest {
width: 540px;
margin: 20px 0 0 50px;
padding-right: 50px;
float:left;
position:relative;
height: 480px;
font-size:18px;
letter-spacing: 0.05em;
}

END CSS

HTML

<div id="main" class="wrapper">
<div id="primary" class="site-content">
<div id="content" role="main">
<article id="post-5" class="post-5 page type-page status-publish hentry">
<div class="entry-content">
<div class="columnshomepage_artduc">
</div>
<div class="columnshomepage_rest">
</div>
</div><!-- .entry-content -->
</div><!-- #content -->
</div><!-- #primary -->
</div><!-- #main .wrapper -->

END HTML

And here is the website:

http://www.artresourcestransfer.org/dev ... stransfer/

Please help!

thanks!

[LIMPET235]

Moving to Web Dev...

[trolly]

Should the page scroll by itself or is there a trigger?
For me it looks like the scrolling script is not executed at all.

[pnmarques]

just a note: I forgot to add float:left; and position:relative; to the #article.

It's a manual horizontal scroll, no trigger. I have some tags that allow you to jump to the respective content on the page. In Firefox the page is horizontal, that's fine, but what I don't understand is why it's wrapping up fine at the end of the last item on Chrome and Safari but not on Firefox? :/

thanks

[jscher2000]

I think width:20000px; is the problem but what is the solution? You can set it to 5084px on my system for a good fit, but I can't think of a good automatic way to deal with it.