By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
458,054 Members | 902 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 458,054 IT Pros & Developers. It's quick & easy.

how can one prevent a horizontal list from breaking?

P: 9
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
Jul 13 '10 #1
Share this Question
Share on Google+
10 Replies


TheServant
Expert 100+
P: 1,168
Can you give an example of some (shortened) code of you current HTML and CSS? Also a screenshot if you think it would help.
Jul 13 '10 #2

P: 9
i will try to post a link to an example page but consider this code in the meanwhile:
HTML:
Expand|Select|Wrap|Line Numbers
  1. <div id="container">
  2. <ul id="list">
  3. <li>item1</li>
  4. <li>item2</li>
  5. <li>item3</li>
  6. <li>item4</li>
  7. <li>item5</li>
  8. <li>item6</li>
  9. <li>item7</li>
  10. </ul>
  11. </div>
  12.  
CSS:
Expand|Select|Wrap|Line Numbers
  1. #container{
  2. width: 200px;
  3. overflow: hidden;
  4. }
  5. #list{
  6. display: inline;
  7. }
  8.  
  9. #list li{
  10. float: left;
  11. }
  12.  
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.
Jul 13 '10 #3

zorgi
Expert 100+
P: 431
If you give #container a height and overflow will be hidden.
Jul 13 '10 #4

P: 9
i am afraid this does not prevent the UL from breaking it will simply hide the vertical overflow caused by the line breaking.
Jul 14 '10 #5

zorgi
Expert 100+
P: 431
Thats how I understood your problem. What exactly are you trying to achive if not to hide overflow?
Jul 14 '10 #6

P: 9
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..
Jul 14 '10 #7

JKing
Expert 100+
P: 1,206
Expand|Select|Wrap|Line Numbers
  1. #container{
  2. width: 200px;
  3. overflow-y:hidden;
  4. overflow-x:scroll;
  5. white-space:nowrap;
  6. }
  7. #list{
  8.  
  9.  
  10.  
  11. }
  12.  
  13. #list li{
  14. display: inline;
  15.  
  16. }
Is this what you are looking for?
Jul 14 '10 #8

zorgi
Expert 100+
P: 431
similar :


Expand|Select|Wrap|Line Numbers
  1.  
  2. #container{
  3.     width: 200px;
  4.     overflow: auto;        
  5. }
  6. #list{
  7.     white-space:nowrap;
  8.     padding: 0;
  9.     margin: 0;
  10. }
  11. #list li{
  12.     display: inline;
  13. }
  14.  
  15.  
Jul 14 '10 #9

P: 9
@JKing
doesnt work. still breaks to a new line.
Jul 14 '10 #10

JKing
Expert 100+
P: 1,206
@crippletoe
I tested it and it works fine in Firefox and IE8.

Make sure you moved display:inline from #list to #list li.
Jul 14 '10 #11

Post your reply

Sign in to post your reply or Sign up for a free account.