Allowing elements to float off the screen horizontally

Question

I'm in a bit of a pickle here, i have 6 <li> element sets in the same <ul>. Here's a demo. My goal is to allow the elements to overflow off the right of the page and I will cycle through them later with javascript. For some reason no matter what I try it just pushes the other elements down. i have tried:

float:left;

display:inline-block;

every flavor of display actually, also tried clear:both; I have also tried setting the list in a div and setting the width to a ridiculous pixel width and hoping that would push it off the edge properly but it did nothing.

Any ideas?

I want to try to avoid javascript solutions, but everything is welcome.

note: eventually these will be more that 20% width, each <li> will span the screen width and move in when jquery says so

Answer 1

You need to make your li width a fixed width instead of 20%, if you have it as a percentage then it doesn't matter how big your container is, the li will always be 20% of that width.

Also make sure the li container has a big enough width to contain your li's

Something like this

http://jsbin.com/eyemaf/1/edit Hope this link works I don't usually use jsbin

.bodynavs{
    width:200px;
    min-height:100px;
    border:1px solid green;
}

#slideimages{
    list-style-type:none;
    padding:0;
    margin:0;
    overflow:hidden;
    width: 2000%;
}

Answer 2

You'll want to try changing the white-space CSS property:

white-space: nowrap;

This will cause your list elements to be all on one line, going off-screen as intended, to be scrolled in as necessary.