span css help IE7 - How can I set the width?

I have this CSS and I cannot set the width on a span element. Any ideas what I am doing wrong?

#address-readonly
{
  margin-left:150px !important;
  padding-left:100px;  
}

I am using this in 2 areas in my application. Here is the first area:

<tr>
  <th colspan="2">Address Details</th>
  <th><span id="address-rea开发者_JAVA百科donly" class="address-readonly"></span></th>
</tr>

And here is the second area:

<div id="addressHeader" class="addressHeader">
<span>Address Details</span>
<span id="address-readonly" class="address-readonly"></span>

I want the address-readonly span to be more right aligned. The padding/margin combo has almost no effect. What should I be doing here? I don't want to add a bunch of non-breaking spaces, but that's basically the effect I am looking for. This particular client has an office full of IE7 machines, so no FireFox or Safari etc... I have tried setting the width of the span as well.

---

Try this:

#address-readonly
{
  display:block;
  float:left;
  margin-left: 150px;
  width: 100px; /* If you want to set the width */
}

or you could use a div and not set the display attribute.

---

If applicable, you could try using display: block:

#address-readonly {
    display: block;
    width: 200px;
}

Without floating, the span will be on it's own row. Hope that helps.

---

Your only choice is a display value of block or inline-block, because inline elements are resized by their content. Also, please note that inline-block is not that well supported.

---

Guillaume's and Wicked Flea's answer complement each other, but some points are missing.

Only "box elements" can have its width/height attribute set. Span is a inline element, so it will resize it self to fit content.

So, if you want your elements to have width set, you should use a box element. The problem here is that box elements do not line up in the same row by default. You can then use float and margins to align a box element with another box element.

All that being said, it would be good to use Guillaume's answer. BUT some quirks may appear, check this link link about clearing floats.

What would I do: Use the workaround presented in the link, then use both spans as divs, and have them floated to the left, with your widths and paddings set.