CSS: button won't get wider?

[xorn]

Just created this menu that was supposed to look like thishttp://gyazo.com/8afc87a69d0d859f9069bbcaa1547745.pngI have used min width for each button and max width if the text of the button gets too long.i have a gradient bg-repeat for the buttonsbut whenever the text gets bigger, this is what happens (the last button):http://gyazo.com/44852f4b9b7b5fce3e8d156f469a6852.pngThis is my HTML code I use for each button:\[code\]<div class="menubutton"><span class="menupadding">hofffffffffffme</span></div>\[/code\]And this is the css:\[code\].menubutton { background-image: url("../img/buttonbg.png"); background-repeat: repeat-x; min-width: 82px; height: 55px;}.menupadding { position: absolute; padding: 16px; margin-left: 7px;}\[/code\]How do I make it so if the text of the menu buttons ever passes the width limit, the button will automatically get wider? I tried width: auto but it just messes up.Thanks.