Horizontal Overflow

SOLVED: See following two posts.

Hello,
I just finished making a site, but there are a couple of things not working properly.
Most pressingly, my image gallery won't scroll horizontally, as it should.
I set the DIV to have x overflow, and y overflow hiddden. And the horizontal scroll bar appears, but there is nothing to scroll through, even though there are several images past the edge.

Here is my website:
http://www.finnhaverkamp.com

Below is my CSS sheet. The ID I'm using specifically is #Box2. I've spaced it for you. Of course, you can see the HTML at the website itself.


body
{
margin: 20px 0px 0px 0px;
padding: 0px 0px 0px 0px;
background-position:center center;
background-repeat:no-repeat;
background-color: black;
}



#layoutouter {
width: 920px;
height: 500px;
margin: 20px auto;
border: 5px solid black;
position: relative;
background-repeat: no-repeat;
z-index:1;
}


#layoutinner {
background-repeat: no-repeat;
width: 854px;
height: 386px;
margin: 40px 0px 0px 40px;
border: 0px solid white;
position: relative;
z-index:2;

}

#left{
background: url(images/modified/treebox.jpg);
width: 150px;
height: 150px;
margin: 90px 0px 0px 0px;
border: 1px solid white;
position: relative;
filter:alpha(opacity=60);
opacity:0.6;
text-align:center;
cursor:pointer;
z-index:5;
}


#lefttext{
display: block;
margin: 0px 0px 0px 0px;
padding:0px 0px 0px 0px;
filter:alpha(opacity=0);
opacity:0.0;
text-align:center;
color:white;
font-family:"Rough_Typewriter";
font-size:25pt;
width: 155px;
height: 106px;
cursor:pointer;
z-index:6;
}


#box1
{
background:url(images/modified/createversion2.jpg);
width: 500px;
height: 450px;
margin: 20px 0px 0px 250px;
padding: 0px 0px 0px 0px;
border: 1px solid white;
position: absolute;
color:white;
bg-color:white;
background-color:white;
display: none;
text-align:center
filter:alpha(opacity=95);
opacity:0.95;
z-index:11;
}

#topmid{
background: url(images/modified/duomoboxframe.jpg);
width: 200px;
height: 100px;
margin: 0px 0px 0px 200px;
border: 1px solid white;
position: relative;
filter:alpha(opacity=60);
opacity:0.6;
text-align:center;
cursor:pointer;
z-index:3;
}


#topmidtext{
display: block;
margin: 0px 0px 0px 0px;
padding:0px 0px 0px 0px;
filter:alpha(opacity=0);
opacity:0.0;
text-align:center;
color:white;
font-family:"Rough_Typewriter";
font-size:20pt;
width: 201px;
height: 51px;
cursor:pointer;
z-index:4;
}







#box2
{
background:url();
width: 920px;
height: 510px;
margin: 0px 0px 0px 0px;
padding: 0px 0px 10px 0px;
border: 1px solid white;
position: absolute;
color:white;
bg-color:white;
background-color:white;
display: none;
text-align:center
filter:alpha(opacity=95);
opacity:0.95;
overflow-y:hidden;
overflow-x:scroll;
z-index:15;
}







#right{
background: url(images/modified/relaxingtall.jpg);
width: 115px;
height: 210px;
margin: 0px 0px 0px 650px;
padding: 0px 0px 0px 0px;
border: 1px solid white;
position: relative;
filter:alpha(opacity=60);
opacity:0.6;
text-align:center;
z-index:7;
overflow:visible;
}


#righttext{
display: block;
margin: 0px 0px 0px 0px;
padding:0px 0px 0px 0px;
filter:alpha(opacity=0);
opacity:0.0;
text-align:center;
color:white;
font-family:"Rough_Typewriter";
font-size:25pt;
width: 216px;
height: 111px;
z-index:8;
overflow:visible;
}

#box3
{
background:url();
width: 920px;
height: 500px;
margin: 25px 0px 0px 0px;
padding: 0px 0px 0px 0px;
border: 1px solid white;
position: absolute;
bg-color:black;
background-color:black;
display: none;
text-align:center
filter:alpha(opacity=95);
opacity:0.95;
overflow:auto;
z-index:16;
}

#bottomright{
background: url(images/modified/heartdunetall.jpg);
width: 96px;
height: 210px;
padding: 0px 0px 0px 0px;
margin: -145px 0px 0px 600px;
border: 1px solid white;
position: relative;
filter:alpha(opacity=60);
opacity:0.6;
text-align:center;
z-index:9;
overflow:visible;
}

#bottomrighttext{
display: block;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
border: 0px 0px 0px 0px;
filter:alpha(opacity=0);
opacity:0.0;
text-align:center;
color:white;
font-family:"Rough_Typewriter";
font-size:25pt;
width: 216px;
height: 111px;
z-index:8;
overflow:visible;
}
#box4
{
background:url();
width: 920px;
height: 450px;
margin: 20px 0px 0px 0px;
padding: 0px 0px 0px 0px;
border: 1px solid white;
position: absolute;
color:white;
bg-color:black;
background-color:black;
display: none;
text-align:center
filter:alpha(opacity=95);
opacity:0.95;
z-index:18;
overflow:auto;
}


#logo
{
margin: 345px 0px 0px 29px;
color: white;
font-family:"Rough_Typewriter";
font-size: 45px;
z-index:10;
}

ul.gallery
{
list-style-type:none;
margin:0;
padding:0;
}

ul.div
{
list-style-type:none;
margin:0;
padding:0;
}

li.photo
{
float:left;
color:#FFF;
overflow:hidden;
}

li.divvisible
{
float:left;
color:#FFF;
overflow:visible;
}

li.divhidden
{
float:left;
color:#FFF;
overflow:hidden;
}

li.right
{
float: right;
}

p
{
color:white;
filter:alpha(opacity=100);
opacity:1.0;
text-align:center
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
font-family:"Rough_Typewriter";
font-size: 25px;
z-index:20;
}
p.black
{
color:white;
filter:alpha(opacity=100);
opacity:1.0;
text-align:center
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
font-family:"Rough_Typewriter";
font-size: 25px;
font-style: strong;
z-index:20;
}



.rollover:hover
{
filter:alpha(opacity=100);
opacity:1.0;
overflow:visible;

}

a:link {color:white;} /* unvisited link */
a:visited {color:white;} /* visited link */
a:hover {color:white;} /* mouse over link */
a:active {color:white;} /* selected link */

.adbar_links
{
display:block;
height:100%;
width:100%;
background-color:transparent;
text-decoration:none;
overflow:visible;
}

.adbar_links3
{
display:block;
height:100%;
width:100%;
background-color:black;
filter:alpha(opacity=100);
opacity:1.0;
text-decoration:none;
overflow:visible;
}

a.adbar_links:active, a.adbar_links:visited
{
display:block;
height:100%;
width:100%;
background-color:transparent;
text-decoration:none;
overflow:visible;
}


a.adbar_links:hover
{
display:block;
height:100%;
width:100%;
background-color:transparent;
text-decoration:none;
overflow:visible;
}



.adbar_links2
{
display:block;
height:100%;
width:100%;
background-color:transparent;
text-decoration:none;
overflow:visible;
}


In my earlier testings, if I set my overflow to auto or scroll, the div does scroll vertically. But it simply refuses to scroll horizontally. Any ideas? Thanks in advance.

Hello Gryffin,
You have .adbarlinks set to 100% width but that's not really what contains your images.
Try giving the ul a width that will fit the images you have instead:


ul.gallery
{
width: 2065px;
list-style-type:none;
margin:0;
padding:0;
}

Hello Gryffin,
You have .adbarlinks set to 100% width but that's not really what contains your images.
Try giving the ul a width that will fit the images you have instead:


ul.gallery
{
width: 2065px;
list-style-type:none;
margin:0;
padding:0;
}

Aha! That was completely it. It works perfectly now. Thank you for the help.