Creating a zero-width wrap point for all browsers

Question

I'm writing a JS snippet to create a series of tabs to allow a viewer to cycle through various parts of a web page instead of scrolling down to see them. The tabs are all <a> elements, encased in a <span> element each for prettifying purposes. The spans are all chucked in a <div> . No floating. The number of tabs shown depends on the page which is modified by the script, and can go up to around twenty or possibly more. In cases where there are many tabs the div needs to wrap. I accomplished this in FF by inserting a zero-width space between each span, which works quite nicely. However, webkit doesn't like this, and refuses to line-break. For aesthetic purposes the tabs really need to be scrunched up next to each other, and yet I am at a loss as to how to accomplish this in a way which works with Safari and Chrome. Any assistance would be greatly appreciated.

My code can be seen here .

Answer 1

On my website I've solved this by having the container div to have

div#container { 
  overflow: auto; 
}

and in the spans inside the div

div#container span 
{ 
  float: left; 
  display: block; 
}