5

I am trying to increase the width of #Item, but it increases only with text width.

HTML

<div><span class="Item">Brand Strategy:</span><span class="Summary">Strategy</span></div>

CSS

.Item{background-color:#000; height:40px; color:#FFF; text-align:center; width:200px;}

How do I get the specified width for #Item.

Thanks Jean

X10nD
  • 21,638
  • 45
  • 111
  • 152
  • 1
    Somebody correct me if I'm wrong, but I don't think spans are allowed to have a fixed width. It can have a right margin or padding though, if you're trying to put some space between spans. – kijin Oct 30 '10 at 05:43
  • @kijin spans cant have widths? – X10nD Oct 30 '10 at 05:45
  • Apparently, inline elements can't have widths. See http://stackoverflow.com/questions/257505/css-fixed-width-in-a-span – kijin Oct 30 '10 at 05:48
  • @kijin not looking to set width for text, but for span. If you could put this as an answer too – X10nD Oct 30 '10 at 05:50

5 Answers5

9

I wrote part of this in comments above, but rewriting here for further clarification.

<span> is an inline element. Inline elements can't have a fixed width; their width is determined by the width of the text they contain, plus the margins and paddings.

See CSS fixed width in a span

You can change this behavior by turning your span into a block-level element. This is done by setting display: block or display: inline-block. But this also introduces other behavior, such as floating and taking up a whole line instead of staying inside the paragraph. This, again, can be countered by float: left and similar options. Weigh the different options and decide based on your needs.

In your specific code example, you might benefit from using <dt> and <dd> tags instead. They were built for exactly that purpose.

Community
  • 1
  • 1
kijin
  • 8,702
  • 2
  • 26
  • 32
  • I wanted to upvote what you have written, and possible provide you with a accept if the solution works – X10nD Oct 30 '10 at 07:07
1

The span is inline element, you can not apply width or height to it unless you make it block-level element like this:

span.Item{
   display:block;
   background-color:#000;
   height:40px;
   color:#FFF;
   text-align:center;
   width:200px;
}

Or you can set the display to inline-block to support old dumb IE versions.

More Info:

Alternatively, you can use a div to apply the width if you want.

Sarfraz
  • 377,238
  • 77
  • 533
  • 578
0

You can use display: inline-block , if you use display: block you will have to float: left as well.

superUntitled
  • 22,351
  • 30
  • 83
  • 110
0

The span is an inline element, so the only way to change its width is to make it a block element or setting its display to inline-block. After doing this, you should float it to the left.

I hope this was of help.

Dolapo Adelana
  • 1
  • 1
-2

The <span> element in an inline element. Therefore, you cannot apply width or height.

Spectric
  • 30,714
  • 6
  • 20
  • 43
KAOUTHER HABIB
  • 7
  • 1