CODEWITHSUNDEEP
htmlcss
user2218845
user2218845

Reputation: 1121

Why width CSS attribute of label doesn't work without float?

I'm new in CSS, and I've got one question. I'd like to make a good simple form, and there is the following code:

<form>
    <div class="row"><label for="name">Some text field</label><input type="text" name="name" /></div>
    <div class="row"><label for="surname">Some another text field</label><input type="text" name="surname" /></div>
</form>

Some CSS code:

label {
    float: left;
    width: 230px;
    text-align: right;
    margin: 5px;
}

.row {
    clear: left;
}

I copied and pasted this code from some book. I understand floating, clearing, but I don't understand why does "width" attribute work with label (because it inline element) and, in this case, why doesn't "width" work without "float"? Please, make me clear. Thanks

Upvotes: 1

Views: 3005

Answers (2)

Bhojendra Rauniyar
Bhojendra Rauniyar

Reputation: 85545

label is inline element so it doesn't accept the width. To accept the width of any element it should be either inline-block or block element. And by setting float to any element behaves like this is an inline-block element and also another info for you position absolute or fixed also thinks as it is a block level element.

If you want to make label accept the width you should define label as inline-block.

label {
    /*float: left;*/
    display: inline-block;
    width: 230px;
    text-align: right;
    margin: 5px;
}

Upvotes: 0

Rodik
Rodik

Reputation: 4092

The Label element is defaulted to inline display mode.

Inline elements don't accept a width property, they will be rendered in the width of their content.

Floated elements on the other hand, are like inline-blocks. they will accept a width property.

By applying a float property to an element you are essentially changing it's display property to something like (but not exactly) inline-block.

Upvotes: 5

Related Questions