How to make a DIV container that DOES NOT shrink/expand according to its text inside?

Question

basically I want to make a button using a div container. It's a play/pause button, the symbol I use inside the button is bold "ll" for pause and the symbol "►" for play.

However when I switch the symbols with javascript inside the button. the width of the div also changes. As the symbol "►" is a little wider than the bold "ll".

So how can I make the div with a fixed width, so that the "div-box" does not shrink nor expand?

Thanks!

Answer 1

Got it fixed, actually display:inline-block; works but not for all browsers. I ended up finding a good solution which is to use <button> , which by itself is a inline div and you can modify it's dimensions.