After researching various solutions for this issue, I have experimented with multiple methods but have been unsuccessful in resolving the problem at hand.
I have successfully created a photo gallery that is arranged in a single horizontal row. The parent DIV container stretches across 100% of the browser width and contains a child DIV with a substantial width (4000px+) to house the images in a row. Through PHP scripting, photos are automatically inserted into the folder.
Everything runs smoothly in Chrome, Safari, and Opera. Despite having four photos and a wide child DIV, the horizontal scrolling stops after the fourth image has been displayed.
In Firefox, however, the browser shows empty space beyond the last photo, allowing users to scroll endlessly even after reaching the end of the gallery. I have attempted various approaches to rectify this issue without success.
The CSS styling:
#photoparent {
border-top: 1px solid white;
clear: both;
height: 600px;
overflow-y: hidden;
}
#photochild {
background-color: #000000;
margin-right: -5800px;
}
#photochild img {
float: left;
padding-right: 3px;
}