my span can't stay in a div element

Firefox , safari and chrome wor开发者_如何学Pythonks fine but not IE ... Here is my HTML

<div id="sc-footer">Total<span id="sc-total">$0</span></div>

css

#sc-footer{
 font-size: 1.6em;
 line-height:1.5em;   
 position:absolute;
 bottom: 20px;
 padding:9px 5px;
 height:20px;
 background: #dadada;
 color: #545454;
}
#sc-total{
 display:inline;
 float:right;
}

Or use overflow:auto on the #sc-footer.

Just place your span BEFORE the word Total :)

If all you want is for the Total text to be aligned on the right of the <div>, use text-align:right; in your CSS.

Also, it's very strange to float a <span>. If you truly need the float, use <div> instead of <span> — float is for block elements (like divs) while spans are inline elements. Finally, a good rule of thumb for IE is to always give your floated elements a fixed with. It makes the rendering more explicit, and especially for older versions of IE it's important to be as specific as possible.

@dareal: Use "div" tag, if you want to implement block element. Use "span" tag, if you want to implement inline element. Markup and styles presented by you prove that you know nothing about markup semantics, thus must learn about it before touching markup or CSS. If you will avoid learning it, eventually you will have to go back and do it, in order to improve so called SEO, which would not be necessary if you would do a good job in first place. What is more important, you didn't even bother to formulate a question of any kind, and just rushed to bash IE over the head with a blunt object.

@lonut Staicu: If he would do that, he would just end up with unnecessary span tag.

@Julian: Don't use hacks!