Could someone help me achieve this in CSS?

Basically I want to display two span next to each other. The condition is that first span has max-width 200px so if it exceeds 200px all the overflowed characters are hidden as overflow:hidden is applied to this span. Another condition is that the second span will display all the time next to the first span.

The problem is that since IE does not supp开发者_如何转开发ort (IE7, IE8) max-width feature properly I cannot use this property. Is there any other way to achieve this?

So I have:

<div>
<span>one</span> <--- max width is 200 px
<span>two</span> <--- will alwats display next to span one
</div>

I want to display span 2 always right next to span 1. Adding width to span 1 will leave a huge space between span 1 and span 2 so I cannot do this. I need to expand span 1 dynamically until overflowed. And this need to be cross browser compatible ;(

Thanks.

---

Please see if this is what you are after. It works alright in IE8, have tested it.

HTML:

<div id="content">
    <span>oneedaskdaslkdjsaldjaslkdjaslkdjldasdasdasdasdalkdnaskdnasjkdnaskjdnaskjndaskjndajksdnasjkdnkjsandkjsandkjasndkjasndjksandkjsandjkndjksandjkasndjkasndkjasndkjsnajsalkdjasd</span>
  <span>two</span>
</div>

CSS:

div span{display:block;max-width:200px;overflow:hidden;float:left;margin:5px;}

---

You could try this:

max-width: 200px;
width: expression(document.geElementById('container').style.
width > 200 ? "200px": "auto" );