HTML Label widths, want fixed but it keeps auto-sizing according to text?

Question

I am creating some tabs using labels, then im going to add some simple hover over javascript. However i want all the labels to be of fixed size with the text in the centre. This is what i have:

<style>
        .button
        {
            border-style:solid;
            border-width:1px;
            background-color:rgb(193,203,225);
            font: normal 14px arial, sans, sans-serif;
            text-align:center;
            color: rgb(54,95,145);
            width:100px;
            margin: 0px; 
            padding: 0px; 
            padding-top: 3px; 
            padding-bottom: 3px; 
            text-align: center; 
        }
    </style>

    <label id='Label5' class='button'>  Personal Details  </label>
    <label id='Label1' class='button'>     Education      </label>
    <label id='Label2' class='button'>    Achievements    </label>
    <label id='Label3' class='button'>   Work Experience  </label>
    <label id='Label6' class='button'>     IT Skills      </label>
    <label id='Label4' class='button'>     Languages      </label>

but its not working? Could someone please help?

Answer 1

you need to add display:block to get widths to work, and then add float:left to get them to layout the way you want

Answer 2

a layer is a inline-element, and you can't give a width to inline-elements. try to set display:inline-block for .button (note that this isn't supported by IE6)

Answer 3

Set display: inline-block to the .button class as labels are inline elements so it does not recognize your width.

Answer 4

label.button {
    display: block;
    text-align: center;
    width: 100px;
}