how can one prevent a horizontal list from breaking?

[crippletoe]

Hi all, i am looking for a way to prevent a horizontal, inline unordered list from breaking into seperate lines once contained inside a element with specific width (shorter than the list). the element has "overflow" set to "hidden".

the only way i found to create that effect is by giving a specific width to the "UL" element but now, i have to create that effect for a list with unknown width!! (user can add items to list). is there any other way? it would help me so much!!

thank you all

[TheServant]

Can you give an example of some (shortened) code of you current HTML and CSS? Also a screenshot if you think it would help.

[crippletoe]

i will try to post a link to an example page but consider this code in the meanwhile:
HTML:

<div id="container">
<ul id="list">
<li>item1</li>
<li>item2</li>
<li>item3</li>
<li>item4</li>
<li>item5</li>
<li>item6</li>
<li>item7</li>
</ul>
</div>

CSS:

#container{
width: 200px;
overflow: hidden;
}
#list{
display: inline;
}

#list li{
float: left;
}

the list is horizontal and if it is wider than the width of the <div> it will break and continue on a new line.
i would like it to go on on the same line beyond the border of the #container DIV.

[zorgi]

If you give #container a height and overflow will be hidden.

[crippletoe]

i am afraid this does not prevent the UL from breaking it will simply hide the vertical overflow caused by the line breaking.

[zorgi]

Thats how I understood your problem. What exactly are you trying to achive if not to hide overflow?

[crippletoe]

i am trying to create a horizontal scroller on the container div. overflow will be set to auto than but i cannot even get to that stage because the list keeps breaking to a new line when it reaches the border of the div and so there is no need for the horizontal scroller..

[JKing]

#container{
width: 200px;
overflow-y:hidden;
overflow-x:scroll;
white-space:nowrap;
}
#list{



}
 
#list li{
display: inline;

}

Is this what you are looking for?

[zorgi]

similar :

#container{
	width: 200px;
	overflow: auto;		
}
#list{
	white-space:nowrap;
	padding: 0;
	margin: 0;
}
#list li{
	display: inline;
}

[crippletoe]

#container{
width: 200px;
overflow-y:hidden;
overflow-x;scroll;
white-space:nowrap;
}
#list{



}
 
#list li{
display: inline;

}

Is this what you are looking for?

doesnt work. still breaks to a new line.

[JKing]

doesnt work. still breaks to a new line.

I tested it and it works fine in Firefox and IE8.

Make sure you moved display:inline from #list to #list li.