HTML/CSS - Right and left align on the same line?

Question

First off, I know there are ways to make it so that text can be on the same line. But I am not sure how to extend on this. This is what I have so far:

How would I be able to make it so it goes all the way across without using tables?

This is the HTML portion:

<p style="float: left;" class="details"><a href="#Top">To Top</a></p>
<p style="float: right" class="details">Latest Version:  0.3.6.17 | Downloads: 12 | <a href="#">Download</a></p>

This is the CSS portion:

.details {
padding: 7px 15px;
margin: 20px 15px 15px 15px;
background: #111111;    
}

I would really hate to have to resort to tables for this. Is there an easier way. Thank you anyone who can help me.

Answer 1

This diverges a bit from what you started with, but has been how I've done this in the past:

CSS:

.details {
  clear: both;
  padding: 7px 15px;
  margin: 20px 15px 15px 15px;
  background: #111111;
  text-align: right;
}

.toplink {
  float: left;
}

HTML:

<div class="details">
  <span class="toplink">To Top</span>
  Latest Version:  0.3.6.17 | Downloads: 12 | Download
</div>