my span can't stay in a div element

Question

Firefox , safari and chrome works 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;
}

Answer 1

Just place your span BEFORE the word Total :)

Answer 2

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

Answer 3

Try removing the float:right; It worked OK for me in firefox chrome and IE.

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; */ }

Total$0

Answer 4

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.