css label width not taking effect

css, html, label

Solution

Do `display: inline-block`:

#report-upload-form label {
    padding-left:26px;
    width:125px;
    text-transform: uppercase;
    display:inline-block
}

http://jsfiddle.net/aqMN4/

Problem

I have a generic form, which I'd like to style to align the labels and the input fields. For some reason when I give a width to the label selector, nothing happens: HTML: ``` <form id="report-upload-form" method="POST" action="" enctype="multipart/form-data"> <p> <label for="id_title">Title:</label> <input id="id_title" type="text" class="input-text" name="title"></p> <p> <label for="id_description">Description:</label> <textarea id="id_description" rows="10" cols="40" name="description"></textarea></p> <p> <label for="id_report">Upload Report:</label> <input id="id_report" type="file" class="input-file" name="report"> </p> </form> ``` CSS: ``` #report-upload-form { background-color: #316091; color: #ddeff1; font-weight:bold; margin: 23px auto 0 auto; border-radius:10px; width: 650px; box-shadow: 0 0 2px 2px #d9d9d9; } #report-upload-form label { padding-left:26px; width:125px; text-transform: uppercase; } #report-upload-form input[type=text], #report-upload-form input[type=file], #report-upload-form textarea { width: 305px; } ``` Output: jsFiddle What am I doing wrong?

Original source