CSS issue with multiple items floated left and one item floated right

Question

I'm having an issue with floats in the header of this web page - http://test.debtfree.co.uk/ . My markup is as follows:

<div class = "landline">
 <!--content-->
</div>
<div class="mobile">
 <!--content-->
</div>
<div class="times">
 <!--content-->              
</div>
<a class="callback">
 <!--content-->                        
</a>

I have applied a float:left rule to .landline , .mobile and .times I have also appled a float:right to .callback .

The issue is that when I resize the browser horizontally slightly from the left .callback (contains the text - "Request We Call You") will wrap underneath the other elements, whereas I would rather that it sits inline with the elements that are floated left.

However I have found that if I move .callback to the top of the HTML fragment, so that it is at the top of the browser reading order then the issue is removed. However, I am fairly certain postioning my elements using the browser reading order is bad pratice. By stating the .callback first (and floating it right) I tell the element to float right first, but surely there is a better way to achieve this with CSS?

<a class="callback">
 <!--content-->                        
</a>
<div class = "landline">
 <!--content-->
</div>
<div class="mobile">
 <!--content-->
</div>
<div class="times">
 <!--content-->              
</div>

CSS:

.top-area .landline,.top-area .mobile {
float:left;
margin-right:30px;
}

.top-area .times {
color:#6289d8;
float:left;
}

.top-area .callback {
border:1px solid #888;
color:#36C;
display:block;
float:right;
font-weight:700;
text-align:right;
box-shadow:1px 1px 4px 2px #DDD;
padding:7px;
}

Answer 1

you can: remove float:right from .callback and add:

position: absolute;
top: 30px;
right: 0;
width: 140px;

It looks good until screen widths greater than 1340px, then you could just adjust with media queries.