Question

I’m dynamically filling a div with li elements using php. I was having trouble getting the scrollable area to be limited to content. I was previously using a crap load of extra space in my ul, and I still am but when I set height in the css to 70% it works perfectly.

Is this because a ul is traditionally vertical and I’m forcing it horizontal?

heres a link to the working site http://www.evan-livingston.com/test/gallery.php

My css:

div#lasteventimg {
    width: 100%;
    heigth: 200px;
    overflow-x: scroll;
    overflow-y: hidden;
    position: relative;
}

div#lasteventimg ul {
    list-style: none;
    height: 70%;
    width: 8000px;      
    margin: auto;
}

div#lasteventimg ul li {
    float:left;    
    display: inline-block;  
}

div#lasteventimg img {
    width: 200x;
    float: left;
}

Answer 1

Your div#lasteventimg has its height property spelled wrong.

ul is a block level element and renders as such. A div is also a block level element.

Because you have floated the li’s they sit next to each other until the container is full horizontally. Then they will wrap to the next line. To prevent the wrapping you can use overflow scroll, but ul does not support this property. So instead you use overflow on a containing div.

Hard to tell why your old did not work and your new way does work without example code.