Creating a zero-width wrap point for all browsers

views:

answers:

Creating a zero-width wrap point for all browsers

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.

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; 
}

Photodeus 2010-07-06 14:22:17

hmm, how do I delete my answer, I need to check the sample code first :P

Photodeus 2010-07-06 14:23:47

There should be a delete link on the lower left corner.

SLaks 2010-07-06 14:26:15

Actually, I had that setup initially. The problem with that is that the div does not expand to hold floated content, and consequently can cause problems with any content which immediately follows it when it wraps.

Atelaes 2010-07-06 14:27:18

Expand in width or height?

Photodeus 2010-07-06 14:30:45

Any content that follows, you mean after the div?Add a "clear: both" to that element.

Photodeus 2010-07-06 14:31:33

I'm living under the assumption you want floating buttons, a bit like on my website https://popodeus.com/If you make the browser narrower, they overflow to become multi-row. I hope I didn't misinterpret your goal. In that case I'll just delete my reply as misinformed :)

Photodeus 2010-07-06 14:43:43

No, not really. I do want the buttons to overflow and become multirow if there's not enough space for them any reason. However, I don't want them to float, per the previous problem. If the buttons are floated, the div does not expand vertically, it retains its original vertical size. I then have free roaming floating buttons below the div, which wreaks havoc on non-floating content below. The problem with the "clear:both" div at the end is that there's a floating table of contents on the right, which can be quite tall. When this is the case, all of the content below gets pushed way down.

Atelaes 2010-07-06 22:55:29

In case anyone was wondering, the solution I have now found is the wbr tag, which is now inserted between each span. Both Webkit and Firefox handle this just fine.

Atelaes 2010-07-08 00:48:43

ansaurus

tags:

views:

answers:

Creating a zero-width wrap point for all browsers

related questions