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

Question

I have this CSS and I cannot get the width set 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 some of the HTML

<tr>
  <th colspan="2">Address Details</th>
  <th><span id="address-readonly" class="address-readonly"></span></th>
</tr>

and here is the other

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

I want 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-braking spaces, but that 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.

Thanks, ~ck in San Diego

Answer 1

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.

Answer 2

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.

Answer 3

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.

Answer 4

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.