Dropping the long text within the #navigator box

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

#navigator {
padding:2px 10px;
border:1px solid #555;

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?

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.

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.

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

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?

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:

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

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