Question

I have a list of div displayed on the same line. When the page is not wide enough to display all the div on the same line, I don’t want extra div to be displayed on the next line. How can I avoid displaying extra div on a new line?

Here is a jsFiddle: http://jsfiddle.net/YCFZM/

Try to reduce width on the page and you’ll see some div displayed on a new line.

Thanks.

Answer 1

Updated gist with solution: http://jsfiddle.net/Meligy/YCFZM/16/

Main changes:

• Removed extra quote in HTML at id=""sidebar" which was breaking the gist
• Removed height: 0px; from div#sidebar CSS
• Added white-space:nowrap; to div#sidebar CSS
• Removed float:left from div.sidebar-item CSS
• Added white-space: nowrap; display:inline-block; to div.sidebar-item CSS

Optionally you can also remove text-align:center; from div#sidebar CSS if you meant to make the text be to the left.