CODEWITHSUNDEEP
htmlcss
ripper234
ripper234

Reputation: 230008

Why isn't width:200px applied to this label?

In this example, I'm setting width:200px on form labels. This is not being applied for some reason, and the field appears 0 width when viewed in Chrome Dev Tools.

Any idea why?

Upvotes: 2

Views: 133

Answers (4)

CherryFlavourPez
CherryFlavourPez

Reputation: 7487

As above, you need to get your label to behave like a block element to get it to respect your width declaration. The simplest way to do this is to set it to inline-block like this:

 #form label {
  width:200px;
  display: inline-block;
 }

Or, as @David mentions, float it left. This article describes getting this to work cross-browser.

Upvotes: 2

mamoo
mamoo

Reputation: 8166

Label is an inline element, so you cannot apply a fixed width to it (unless you change its display behavior). See here for a quick map of options/browser compatibility

http://www.quirksmode.org/css/display.html

Upvotes: 0

David Hedlund
David Hedlund

Reputation: 129792

label is an inline element, like a span. It does not have width, but flows with its content. To get it to behave like a div, you would have to instruct it to act like a block-level element:

display: block

From there, you could add width:

width: 200px;
float: left;

Upvotes: 6

Andy Rose
Andy Rose

Reputation: 16974

This is because the label is an inline element so does not have a width property. To set the width you need to make it a block or inline-block element:

#form label {
    display: block;
    width: 200px;
}

Upvotes: 1

Related Questions