Why does setting width in a CSS class attached to my labels not change their width?

Question

I've got this html:

<label class="fixedwidthlbl" for="city">City</label>
<input type="text" name="city" id="city">
<br/>
<label class="fixedwidthlbl" for="state">State</label>
<input type="text" name="state" id="state">
<br/>
<label class="fixedwidthlbl" for="yearin">Year Arrived</label>
<input type="text" name="yearin" id="yearin">
<br/>
<label class="fixedwidthlbl" for="yearout">Year Departed</label>
<input type="text" name="yearout" id="yearout">
<br/>
<input type="submit" name="insertdocument" id="insertdocument" value="Add Place Lived">

...and this CSS:

.fixedwidthlbl {
    width: 320px;
    padding: 2 px;  
}

Yet the "fixedwidthlbl" class is having no effect on my labels.

I've got a fiddle here.

What is wrong with my HTML and/or CSS?

Answer 1

label are inline elements. To give them a width you will need to give them display: inline-block;

.fixedwidthlbl {
    width: 320px;
    padding: 2px;   
    display: inline-block;
}