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 wele.

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

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 wele.

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

• javascript
• css
• html

Share Improve this question Follow asked Apr 19, 2013 at 18:53 NickNick 21311 gold badge55 silver badges1313 bronze badges 4

• Have you tried the CSS "left/top" properties? Setting left:9999px; should push that element way off of the screen. – Mike Marks Commented Apr 19, 2013 at 18:55
• @MikeMarks i would like them to sit next to each other, sure i could margin everything over and up (same with positioning) but thats a really sucky way to do stuff. there has to be another solution. – Nick Commented Apr 19, 2013 at 18:57
• Change you min-height to 100 in the demo, it's hard to tell what's going on when you have it set at 800px – Huangism Commented Apr 19, 2013 at 18:58
• 1 Understood. I know a lot of JavaScript navigation menus use that type of method. – Mike Marks Commented Apr 19, 2013 at 18:58

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

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./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%;
}

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.