Dropping the long text within the #navigator box

HTML & CSS
1

With the code below the #navigator at http://dot.kr/x-test/layOut/09/ is aligned-centered
So far so good, but…

#navigator {
[COLOR="#FF0000"]display:inline;[/COLOR]
padding:2px 10px;
border:1px solid #555;
background:#fff;
}

Since the text in #navigator can be short or long, there are unexpectedly two #navigator boxes at http://dot.kr/x-test/layOut/08/ which has long text in the #navigator.

How can I making the text dropping within the #naviagator box instead of dropping the text with making another #navigator box when the text in #navigator is very long?

2

I don’t think CSS can do this. I may be wrong, of course. But to make this behavior dynamic, you’d need JS of the sorts.

3

I do this behavior dynamic in PHP which is a serverscript language not in CSS.

What I want is CSS code which makes that the white #navigator box is centered when the text is short and the text is dropped within the white #navigator box when the text is very long.

4

Hi, then I’d use display:inline-block instead of display:inline, though that will not work in legacy IE (6-7).

5

http://dot.kr/x-test/layOut/11/ which has the code “inline-block” works fine in chrome, fireFox and safari, and IE8. Thank you.

I don’t mind it is not work in legacy IE(6~7).
but sadly it’s not work in IE9 as I test it.
IE9 is rather future than legacy
Should I ignore IE9 or Should I back to navigator table instead of navigator div?

6

I currently don’t have my Windows emulator working, so I can’t test, but try display:table instead of display:inline-block. Let me know if that works. :slight_smile:

7

It’s not working in IE9 for you? Try clearing your cache. It’s working for me.

8

As I clear my cache, it’s working for me, too. Thank you.