Force float:right? - html

Question

I have a custom html box within Joomla with the following
<span style="color: #FFFFFF; font-size: 1em; padding-top:5px;">
<p style="float: right; display: inline-block; white-space: nowrap; margin-bottom: 5px;"><img src="/images/telephone_call_contact.png"> 0000000000</p>
<br>
<p style="float: right; display: inline-block; white-space: nowrap;"><img src="/images/email_envelope.png"> contact#email.co.uk</p>
<br>
<p style="float: right; display: inline-block; white-space: nowrap;"><img src="/images/shop_open.png"> Open 7 Days 5:00pm-11:00pm </p>
</span>
This works fine. However, when the browser is resized down to a certain level one will come undone until you resize even further.
Similarly, at another dimension they'll also not align properly.
Does anyone know why this behaviour is occurring?
EDIT: As Antonio suggested, adding clear:both to p in the CSS partially resolved this issue. Now the issue occurs only on the first line (when it didn't before)

Answer 1

Add clear:both to your p css rules
example.

Answer 2

I think that adding a clear:right should solve your issue, but I can't be so sure as the images in your snippet do not load.
<span style="color: #FFFFFF; font-size: 1em; padding-top:5px;">
<p style="float: right; display: inline-block; white-space: nowrap; margin-bottom: 5px;"><img src="/images/telephone_call_contact.png"> 0000000000</p>
<br>
<p style="float: right; display: inline-block; white-space: nowrap;clear:right;"><img src="/images/email_envelope.png"> contact#email.co.uk</p>
<br>
<p style="float: right; display: inline-block; white-space: nowrap;clear:right;
"><img src="/images/shop_open.png"> Open 7 Days 5:00pm-11:00pm </p>
</span>

Answer 3

You would better forget using inline styles for your markup, as it has SEO downsides. instead use an external stylesheet.
Also, your markup has some problems, so you'd better do it like this:
.details{
text-align: right;
background-color: #744C27;
}
.details span{
display: inline-block;
vertical-align: middle;
color: #FFFFFF;
font-size: 1em;
white-space: nowrap;
}
.icons{
width: 32px;
height: 32px;
margin-right: 20px;
background-repeat: no-repeat;
}
.phone{ background-image: url( 'images/telephone_call_contact.png' ) }
.email{ background-image: url( 'images/email_envelope.png' ) }
.shop{ background-image: url( 'images/shop_open.png' ) }
<div class="details">
<div><span class="icons phone"></span><span>0000000000</span></div>
<div><span class="icons email"></span><span>contact#email.co.uk</span></div>
<div><span class="icons shop"></span><span>Open 7 Days 5:00pm-11:00pm</span></div>
</div>