css expand text left and preserve container width - html

Question

Please see this fiddle - http://jsfiddle.net/grimmus/vawE9/4/
<div class="refresh">
<div class="date" id="date">
As of 1/10/2013 16:44 2013 (GMT + 1)
</div>
<div class="loading"id="loading">
Loading...
</div>
</div>
In the blue box i am trying to toggle between the date and loading text. The date text can be varying width and i would like this width to stay the same when the text is hidden and the loading text is shown. The width of the date should expand to the left as far as necessary. The loading text should always be aligned left
I am having difficulty preserving the width of the box when showing the loading text. One solution i thought about was applying visibility hidden to the date text and then relatively positioning the loading text over this div with a higher z-index. It seems quite complicated and hope there is an easier solution.
Suggestions/Advice/Tips most welcome.
p.s needs to work in ie7+

Answer 1

Try this jsFiddle example:
jQuery
setInterval(function () {
$('#date').animate({
opacity: .01
}, 0, function () {
$('#loading').fadeIn(0).delay(2000).fadeOut(0, function () {
$('#date').animate({
opacity: 1
}, 0)
});
})
}, 4000);
CSS
body {
margin:25px;
}
.container {
background:#ccc;
height:50px;
width:100%;
}
.refresh {
background:blue;
color:#ccc;
height:20px;
float:right;
margin-right:25px;
min-width:150px;
text-align:left;
position:relative;
}
.date {
position:relative;
}
.loading {
display:none;
position:absolute;
top:0px;
}