HTML / CSS - 左右对齐在同一行？

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>

Answer 2

Add display:inline; to your .details class and make sure the containing div is a block element and its background is set to gray.

Sinan.

Answer 3

I did it this way:

<style type="text/css">
#right {
    float: right;
}

.details {
    margin: 0 auto;
    line-height: 0;
}
</style>

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

The tricky part is that you have to zero out the top and bottom margins for both AND the line-height. If you do this, then floating right on the bottom element lines up.