Number/Div Overlapping - html

Question

I've got a div at the top right of my website which updates showing how many items in your basket. If there is 1 digit, it shows fine, however if it's double digits (10,11,12 etc..) it overlaps. Any idea how to get it to just become wider to show without overlapping?
I've provided a link to a product page so people can add X amount of products and test.
http://bit.ly/17oT6Jo
<!-- Live Basket (Top Right) -->
<div id="tr-basket">
<div class="span4 offset4">
<img src="<?php echo HTTP_HOST; ?>img/basket-icon.png" class="tr-shopping-basket-icon" />
<div id="tr-basket-count"><?php echo number_format($basket->basketCount()); ?></div>
<div id="tr-basket-title">
<p>ITEM<?php if($basket->basketCount()!=1){ ?>S<?php } ?> IN YOUR BASKET<br />
<a href="<?php echo HTTP_HOST; ?>Basket"><span class="label label-info">VIEW</span>
<span class="label label-info">CHECKOUT</span></a>
<!-- <span class="label label-success">ACCOUNT</span> -->
</p>
</div>
</div>
</div>
<!-- End Live Basket -->
css
#tr-basket-count {
display: inline-block;
font-size: 5.5em;
color: #ef798d;
margin-top: 25px;
}
#tr-basket-title p {
display: block;
margin-top: -55px;
margin-left: 100px;
color: #82bdc8;
font-weight: bold;
}
#tr-basket-buttons {
display: block;
margin-left: 100px;
margin-top: 0px;
}

Answer 1

The problem stems from a combination of using a float, followed by an inline-block and finally a block element with a negative top margin all within the <div class="span4 offset4"> containing block.
What I would do is float the img, #tr-basket-count and #tr-basket-title to the left
and apply overflow: auto to the parent div to keep things in one block formatting context.
Be sure to reset the margins on the p element in #tr-basket-title.

Answer 2

Try this:
#tr-basket-title
{
float: right;
}
Add float: right to this element: <div class="span4 offset4" style="float: right; margin-left: 0"></div>